{"id":387055,"date":"2024-06-29T07:05:48","date_gmt":"2024-06-29T07:05:48","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=387055"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=387055","title":{"rendered":"<span>Vue\/React Store \u0438 JS Request Manager<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0440\u0435\u043c\u044f \u0438\u0434\u0435\u0442, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0440\u0430\u0441\u0442\u0443\u0442, \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0442\u044f\u0436\u0435\u043b\u0430 \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u044b. \u0412\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 API (\u043d\u043e \u043d\u0435\u0442 \u0435\u0434\u0438\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0439). \u0414\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0435\u043d REST&#8230; \u0427\u0442\u043e \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0434\u0430\u0442\u044c header (auth token), \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0438\u043f \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0430\u0434\u0440\u0435\u0441, \u0437\u0430\u0434\u0430\u0442\u044c get \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u0442\u0435\u043b\u0435 \u0438 \u0442\u0438\u043f \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u043b\u0430 (json\/multipart). \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044f \u0435\u0449\u0435 \u0447\u0442\u043e \u0442\u043e \u0443\u043f\u0443\u0441\u0442\u0438\u043b (\u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u043e REST). \u0411\u043b\u0430\u0433\u043e \u0435\u0441\u0442\u044c axios \u0438 fetch \u0438 \u043e\u043d\u0438 \u043e\u0442 \u0447\u0430\u0441\u0442\u0438 \u0440\u0435\u0448\u0430\u044e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u0412\u0440\u0435\u043c\u044f \u0438\u0434\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 &#8212; \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0441\u0442\u0435\u0442, \u0430 \u043a\u043e\u0434 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0432\u0430\u043b\u043a\u0443 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u044b. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u0430\u044e\u0442 \u043c\u0438\u043d\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u0438\u043b\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0438. \u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0436\u0435 \u0447\u0430\u0441\u0442\u044c \u0436\u0438\u0432\u0435\u0442 \u043f\u043e \u0441\u0442\u0430\u0440\u0438\u043d\u043a\u0435.<\/p>\n<p>\u042d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0436\u0438\u0442\u044c \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430\u0445 (<strong>Store<\/strong>). \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044f \u0431\u0443\u0434\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Vuex (Vue Store), \u043d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u0434\u0443\u043c\u0430\u044e \u044d\u0442\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0438 \u0434\u043b\u044f React \u0438 Angular. \u041f\u043e\u0447\u0435\u043c\u0443 Vue? \u041e\u043d \u043f\u0440\u043e\u0449\u0435 \u0447\u0435\u043c React (\u043d\u0435\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449) \u0438 \u0443 \u043c\u0435\u043d\u044f \u043d\u0430 \u043d\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u043f\u044b\u0442\u0430. \u0421 Angular &#8212; \u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b.<\/p>\n<h3>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438<\/h3>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u043c\u043e\u0439 SPA \u0431\u044b\u043b \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u044b\u0439 (\u043a\u043e\u043d\u0435\u0446 2015\u0433\u043e\u0434 &#8212; \u0431\u044b\u043b\u0430 \u043a\u0430\u043a\u0430\u044f \u0442\u043e \u0432\u0435\u0440\u0441\u0438\u044f Angular, \u043d\u043e \u043e\u043d\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0430\u043a\u0438 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0439). \u0423\u0436\u0435 \u0442\u043e\u0433\u0434\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u044b api \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u044b\u043c\u0438 \u0438 \u043d\u0430\u0434 \u044d\u0442\u0438\u043c \u0431\u044b\u043b\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043e\u0431\u0435\u0440\u0442\u043a\u0430. <\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430 \u0438\u0437 \u043c\u043e\u0435\u0433\u043e \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 api.js (\u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c).<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">function api_ajax_end(fun, status){   if (typeof window[fun] == 'function'){     window[fun](status);   } }  function api_ajax_start(type, url, info, fun){   if(type!='GET'){info = JSON.stringify(info, null, '\\t');}   var status = 0;   jQuery.ajax({             type: type,     url: url,      data: info,      contentType: 'application\/json;charset=UTF-8',      \/\/ async: false,     timeout : 3000,       headers: { \"login\": login,\"token\": token},     success: function (msg) {       if ( typeof msg == \"object\" &amp;&amp; msg['error'] === 0 &amp;&amp; typeof msg['result'] == \"object\"  ) {         status = msg['result'];       }       api_ajax_end(fun, status);     },     error: function (xhr) {        api_ajax_end(fun, -1);     }   }); }  \/** api auth info *\/ function api_auth_info(info, fun){   api_ajax_start('GET', '\/api\/v1\/auth\/', info, fun); }  \/** api user auth  { \"login\": \"string\", \"password\": \"string\" } *\/ function api_user_auth(info, fun){   api_ajax_start('POST', '\/api\/v1\/auth\/', info, fun); }  \/** api user registration  { \"login\": \"string\", \"password\": \"string\", \"email\": \"email\" } *\/ function api_user_registration(info, fun){   api_ajax_start('POST', '\/api\/v1\/users\/', info, fun); }  \/** api user edit *\/ function api_user_edit(info, fun){   api_ajax_start('PUT', '\/api\/v1\/users\/', info, fun); }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u044b\u043b\u043e \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e (10-15), \u0430 \u0441\u0430\u043c \u043a\u043e\u0434 \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u0435\u0442 \u043d\u0438 \u043d\u0430 \u0447\u0442\u043e. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0438 \u0431\u044b\u043b\u043e \u043c\u043e\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u043c SPA. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0431\u0440\u0430\u0442\u044c \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 Promise \u0438 async\/await, \u0442\u043e \u044d\u0442\u043e \u0438\u0434\u0435\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u043b\u0443\u0447\u0448\u0435 \u0447\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 middle \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u0441\u0435\u0439\u0447\u0430\u0441 (\u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 axios \u0438\u043b\u0438 fetch, \u0433\u0434\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e).<\/p>\n<h3>\u0420\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/h3>\n<p>\u0423\u0432\u044b \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0438 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432 axios \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u0443\u0441\u043a\u0438 \u043a\u043e\u0434\u0430 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 Vue JS<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0433\u0434\u0435 \u0442\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 $axios.interceptors.request.use(function(config) {   config.headers['Authorization'] = 'Bearer ' + store.state.token   return config })  \/\/ \u0438 \u0433\u0434\u0435 \u0442\u043e \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441\u0442\u043e\u0440\u0430  {   \/\/ ...   actions: {     async getUser({ commit, state }) {       await this.$axios         .get(\"api.server.net\/form\")         .then(({ data: { data, countries } }) => {           commit(\"setUserData\", data);           commit(\"setCountries\", countries);         })         .catch(error => {           console.log(\"Error: \", error);         });     },     \/\/ ...   } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u0432\u0438\u043d\u043e\u0432\u0430\u0442 Vue JS, \u043d\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u044d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0435\u0441\u0442\u044c \u0438 \u0432 React. C Angular \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043e\u0447\u0435\u043d\u044c \u0434\u0430\u0432\u043d\u043e \u0438 \u043c\u0430\u043b\u043e, \u043d\u043e \u0441\u0443\u0434\u044f \u043f\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438  \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c, \u044d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0435\u0441\u0442\u044c \u0438 \u0442\u0430\u043c. <\/p>\n<p>\u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0435\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0430 \u043a\u0430\u043a \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c axios \u043a\u043e\u043d\u0444\u0438\u0433\u0435 (headers Authorization &#8212; \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430), \u0442\u0430\u043a \u0438 \u0437\u0430\u0445\u043e\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u044b \u0434\u0430\u043d\u043d\u044b\u0435 url \u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043a\u0438. \u0411\u0443\u0434\u0435\u043c \u0447\u0435\u0441\u0442\u043d\u044b &#8212; \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434 (\u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0445\u0443\u0434\u0448\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432), \u043d\u043e \u044d\u0442\u043e \u0436\u0438\u0432\u0435\u0442 \u0432 \u043a\u0430\u043a\u043e\u043c \u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u042f \u043d\u0435 \u0445\u043e\u0447\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u043e\u0434 junior \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043d\u0430 \u0433\u0430\u043b\u0435\u0440\u0430\u0445) \u0438 \u0440\u0435\u0448\u0430\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440\u0430 &#8212; \u0447\u0435\u0440\u0435\u0437 setTimeout 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b. <\/p>\n<h3>Store &#8212; \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e&#8230;<\/h3>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 store \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 &#8212; \u043d\u0435 \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d\u043e \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442. \u041c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 @.. \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432 \u043c\u0435\u043d\u044f, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e \u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u043a\u0442\u043e \u0442\u043e \u0441\u043a\u0430\u0437\u0430\u043b &#8212; &#171;store \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0438 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u043d\u0435 \u043a\u0443\u0434\u0430&#187;. \u0414\u0430 store &#8212; \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e, \u0443 store \u0435\u0441\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0434\u0435\u0431\u0430\u0433\u0430 (\u043d\u043e \u043d\u0443\u0436\u0435\u043d \u043b\u0438 \u043e\u043d \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435?). \u0414\u0430 \u0438\u043c (\u0434\u0435\u0431\u0430\u0433\u043e\u043c) \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043d\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u043d\u0435 \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u043e\u043d \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0439, \u0430 \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f \u0432\u0435\u0449\u044c \u0438 \u043d\u0430\u0434\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u043e\u0442\u043a\u0443\u0434\u0430 \u0440\u0430\u0441\u0442\u0443\u0442 \u043d\u043e\u0433\u0438&#8230; \u042d\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 store (\u044f \u0432 \u043d\u0435\u043c \u0445\u0440\u0430\u043d\u044e \u043a\u0430\u043a\u0438\u0435 \u0442\u043e \u0441\u043b\u043e\u0432\u0430\u0440\u0438, \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0434\u0440. \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0449\u0438), \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u043e\u0449\u0435 \u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u043e\u0442\u0442\u0443\u0434\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e\u0435.<\/p>\n<h3>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b store <\/h3>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c\u0441\u044f \u0441 \u0442\u0435\u043c \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 &#8212; \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0443\u0447\u043a\u0430\u043c\u0438\/\u0440\u0435\u0448\u0430\u0442\u044c \u0441\u0430\u043c\u0438\u043c \u0441\u0432\u0435\u0440\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 (\u0445\u043e\u0442\u044f \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435).<\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c &#8212; \u044d\u0442\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 (\u044d\u0442\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e). <\/p>\n<\/li>\n<li>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0435\u0441\u0442\u044c \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0438 \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0438\u0445 \u0432\u0437\u044f\u0442\u044c \u0438\u0437 \u043a\u0435\u0448\u0430 (\u044d\u0442\u043e \u0442\u0430\u043a \u0436\u0435 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0440\u0443\u0447\u043a\u0430\u043c\u0438).<\/p>\n<\/li>\n<li>\n<p>\u0422\u0440\u0435\u0442\u044c\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043a\u0438. <\/p>\n<\/li>\n<li>\n<p>\u0427\u0435\u0442\u0432\u0435\u0440\u0442\u0430\u044f &#8212; \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e id (\u043f\u043e \u0444\u0430\u043a\u0442\u0443 &#8212; \u0432\u0441\u0435 \u043a\u043b\u0430\u0434\u0443\u0442 \u0431\u043e\u043b\u0442 \u0438 \u043a\u043b\u0430\u0434\u0443\u0442 \u0432 \u043e\u0434\u043d\u0443 \u044f\u0447\u0435\u0439\u043a\u0443).<\/p>\n<\/li>\n<li>\n<p>\u041f\u044f\u0442\u0430\u044f &#8212; \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435. \u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e news store \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 \u043e\u0434\u043d\u043e\u0439 \u043d\u043e\u0432\u043e\u0441\u0442\u0438 (\u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0431\u0440\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 \u0441\u043f\u0438\u0441\u043e\u043a &#8212; \u043f\u043e \u043c\u043d\u0435 \u044d\u0442\u043e \u0442\u0430\u043a \u0436\u0435 \u043f\u043b\u043e\u0445\u043e).<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0432\u043e Vue<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">export default {   state: {     newsItem: null,   }   getters: {     \/\/ \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c, \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u044f\u043c\u0443\u044e newsItem     getNewsItem(state) { return state.newsItem; }   }   mutations: {     setNewsItem: (state, payload) => {       state.newsItem = payload;     },   }   actions: {     loadNewsItem: async (context, payload) => {       let {data} = await Axios.get('\/api\/news');       context.commit('setNewsItem', data);     },   }, };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u042d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <a href=\"https:\/\/habr.com\/ru\/post\/421551\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0447\u0442\u043e \u0437\u0430\u0433\u0443\u0433\u043b\u0438\u043b\u043e\u0441\u044c<\/a>. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 &#8212; \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b (\u0441 namespase true &#8212; \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0435\u0449\u0435 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u044b\u043c, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c).<\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c store<\/h3>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u0438 \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b &#8212; \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 state newsItemStatus: &#8216;CREATE | LOADING | SUCCESS | ERROR&#8217;. <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b &#8212; \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 newsItem \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c newsItemError. newsItemError &#8212; \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a if(newsItem) \u0432 \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435 (\u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442). <\/p>\n<p>\u0427\u0435\u0442\u0432\u0435\u0440\u0442\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 &#8212; \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c 2 \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u043d\u0430 \u0441\u0442\u0430\u043d\u0438\u0446\u0443 (\u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0449\u0435 1 store&#8230; \u043d\u043e \u044d\u0442\u043e \u0433\u043b\u0443\u043f\u043e). <\/p>\n<p>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 &#8212; \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u043d\u043e \u0435\u0439 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0435\u043d\u0435\u0431\u0440\u0435\u0433\u0430\u044e\u0442. \u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c store.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Vue Store<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import Vue from 'vue'; import newsItemPrepare from 'functionNewsItemPrepare';  const getKey = function (search) {   return 'newsItem_' + search.newsId; }; const getNew = function () {   return {     loadStatus: \"CREATE\",     request   : null, \/\/ \u0434\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441     data      : null,   error     : null,   }; };  export default {   state: {     newsItemObject: {   \/\/ newsItem_1: { loadStatus: \"CREATE\", request: null, data: null, error: null } },   },   getters: {     getNewsItem(state) {     \/\/ \u0442\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u044f\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e 1 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043f\u043e \u044d\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u043c {newsId: 12} (\u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f)       return function(search){         return state.newsItemObject[ getKey(search) ] ? state.newsItemObject[ getKey(search) ] : null;       };     },   \/\/ + getNewsItemStatus(), getNewsItemError()   },   mutations: {     setNewsItem (state, {search, data=null, error=null}) {       var key = getKey(search);       state.newsItemObject[ key ].loadStatus = data ? 'SUCCESS' : 'ERROR';       state.newsItemObject[ key ].request    = 'null';       state.newsItemObject[ key ].data       = data;       state.newsItemObject[ key ].error      = error;     },     clearNewsItem (state) {       state.newsItemObject = {};     },   },   actions: {     async getNewsItem({ state, getters, commit, dispatch }, search) {       \/\/ \u041e\u0447\u0438\u0441\u0442\u0438\u043c \u0438\u043b\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c       Vue.set(state.newsItemObject, key, getNew());       Vue.set(state.newsItemObject[key], 'loadStatus', 'LOADING');        \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u044f \u0443\u043f\u0440\u043e\u0449\u0443 \u0441 30-40 \u0441\u0442\u0440\u043e\u043a \u0434\u043e     try {         let request = Axios.get('\/api\/news');         Vue.set(state.newsItemObject[key], 'request', request);       let {data} = await request;         commit('setNewsItem', {search: search, data: newsItemPrepare(data)});     } catch (e) {         commit('setNewsItem', {search: search, error: e});     }     }   } };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0444\u0430\u0439\u043b\u044b \u043f\u043e 100 \u0441\u0442\u0440\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u044b \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0437\u0433\u043b\u044f\u0434\u0430 (\u0438 \u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0442\u043e\u0436\u0435). \u0422\u0430\u043a \u0436\u0435 \u043d\u0435\u0434\u043e\u0443\u043c\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0430\u043c \u0432\u0441\u0435 \u044d\u0442\u043e&#8230; \u041e\u0442\u0432\u0435\u0442 &#8212; \u043f\u0440\u043e\u0441\u0442, \u0447\u0442\u043e\u0431 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e Store \u0432\u043e Vue<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ &lt;tempate if=\"newsStatus === 'CREATE' || newsStatus === 'LOADING'\">loading ...&lt;\/tempate> \/\/ &lt;tempate if=\"newsStatus === 'SUCCESS'\">{{news.name}}&lt;\/tempate> \/\/ &lt;tempate if=\"newsStatus === 'ERROR'\">error ...&lt;\/tempate>  computed: {   newsStatus(){     store.getNewsItemStatus({newsId: 10});    }   news(){     store.getNewsItem({newsId: 10});    } } create(){   if(newsStatus === 'CREATE') {     store.loadNewsItem({newsId: 10});   } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u042d\u0442\u043e \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u0435\u0449\u0435 \u043f\u0430\u0440\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0440\u0435\u0448\u0430\u0442\u044c. \u041e\u0434\u043d\u0438 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 &#8212; \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439 (\u0441\u0435\u0442\u0435\u0432\u0430\u044f \u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f) \u0438\u043b\u0438 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 alert. \u0412 \u0442\u0430\u043a\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0438 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u0430. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043e\u0431\u0435\u0440\u0442\u043e\u043a \u043d\u0430\u0434 store, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0434\u043e\u043f. \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041a\u043e \u0432\u0441\u0435\u043c\u0443 \u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0434\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043a \u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443 \u0441\u0430\u0439\u0442\u0443\/\u0430\u0434\u043c\u0438\u043d\u043a\u0435 \u0441 \u0442\u0440\u0435\u043c\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u043c\u044b \u043d\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c ~600 \u043b\u0438\u0448\u043d\u0438\u0445 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 (\u044d\u0442\u043e \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u0432 \u043d\u0435\u0431\u043e \u0438 \u043a\u0430\u0436\u0443\u0449\u0438\u0439\u0441\u044f \u043c\u043d\u0435 \u043c\u0438\u043d\u0438\u043c\u0443\u043c). \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u043e (\u043a \u0432\u0430\u043c  \u043f\u0440\u0438\u0434\u0443\u0442 \u043d\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438 \u043d\u0430 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u044f\u0442 &#8230;). <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 store \u0438 \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430 (\u043d\u043e \u044d\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0431\u0435\u0437 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432).<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440 Vue Store \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0431\u0435\u0440\u0442\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import stateCacheCreate from 'stateCacheCreate'; import newsItemPrepare from 'functionNewsItemPrepare';  export default stateCacheCreate({   name: 'newsItem',   getKey({ newsId }) {      return \"newsItem_\" + newsId;    },   getRequestData(search) {     return {       methodName: 'getNewsById',       methodData : {         newsId  : search.newsId,       },     }   },   prepare: newsItemPrepare });<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0424\u0438\u0442\u0431\u0435\u043a &#8212; \u0442\u0430\u043a\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u0430 \u0438 \u0441\u043b\u043e\u0436\u043d\u0430. \u0422\u0443\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u0448\u0430\u0435\u0442 \u0441\u0430\u043c &#8212; \u0447\u0442\u043e \u0435\u043c\u0443 \u043d\u0430\u0434\u043e.<\/p>\n<h3>Request Manager?<\/h3>\n<p>Request Manager &#8212; \u0442\u0430\u043a \u044f \u043d\u0430\u0437\u044b\u0432\u0430\u044e API SDK \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u0441\u0430\u043c\u0438 \u0438 \u0437\u0430\u0442\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0435 \u043f\u043e\u0434 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0432\u043e\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u044c.<\/p>\n<h4>\u041f\u0440\u0438 \u0447\u0435\u043c \u0436\u0435 Request Manager?<\/h4>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u043d\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c Request Manager \u0438 Store (\u044d\u0442\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438 \u0440\u0435\u0448\u0430\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438). \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e Store \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u0435. \u0447\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c, \u043a\u0430\u043a \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c, \u043a\u0443\u0434\u0430 \u0438 \u0442\u0434., \u0445\u043e\u0442\u044f \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u043d\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0438\u0447\u0435\u0433\u043e&#8230; \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0440\u0430\u0437\u0434\u0443\u0432\u0430\u043d\u0438\u044e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044e \u0442\u0430\u043c \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u043e\u0447\u0438\u0449\u0430\u0442\u044c\u0441\u044f \u0438 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043c\u0435\u0440\u0442\u0432\u044b\u043c \u0433\u0440\u0443\u0437\u043e\u043c.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0447\u0442\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Vue \u0431\u0435\u0437 Store \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043d\u043e\u0432\u043e\u0441\u0442\u044c\u044e, \u043a\u0430\u043a \u0431\u044b \u043c\u044b \u0435\u0435 \u0445\u043e\u0442\u0435\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0438\u0434\u0435\u0430\u043b\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440 Vue \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0435\u0437 Store &#8212; \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ &lt;template>&lt;div v-if=\"newsItem\">{{newsItem.name}}&lt;\/div>&lt;\/template>  const loadNewsById = async (newsId) => {   \/\/ ...   return news; } export default {   props: ['newsId'],   data() { return {newsItem: null}; },   async create() {       this.newsItem = await loadNewsById(this.newsId)   } }<\/code><\/pre>\n<\/div>\n<\/details>\n<h3>\u041c\u043e\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/h3>\n<pre><code class=\"javascript\">\/\/ &lt;template>&lt;div v-if=\"newsItem\">{{newsItem.name}}&lt;\/div>&lt;\/template> &lt;script> export default {   props: ['newsId'],   data() { return {newsItem: null}; },   async create() {       try {         this.newsItem = RequestManager.News.getById({ newsId: this.newsId })       } catch(err) {         \/\/ ...       }   } }<\/code><\/pre>\n<p>\u041f\u043e \u043c\u043e\u0435\u043c\u0443, \u0432\u0441\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441, \u0430 \u043d\u0443\u0436\u0435\u043d \u043b\u0438 \u0437\u0434\u0435\u0441\u044c Store \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e? \u041c\u043e\u0435 \u043c\u043d\u0435\u043d\u0438\u0435 &#8212; \u043d\u0435\u0442.<\/p>\n<p><em>\u0410 \u043a\u0430\u043a \u0436\u0435 loading, \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435?<\/em> <br \/>\u0414\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0448\u0430\u0435\u0442 \u044d\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. Loading \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 (\u0441 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u044d\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e, \u043d\u043e \u0440\u0435\u0448\u0430\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0444\u043e\u0440\u043c, \u0434\u043e\u043b\u0433\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b &#8212; \u0442\u0443\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u0448\u0430\u0435\u0442 \u0441\u0430\u043c)<\/p>\n<p><em>\u041f\u0440\u0435\u0434\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445?<\/em><br \/>\u041d\u0430 \u0443\u0434\u0438\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u043d\u0430 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c.<\/p>\n<p><em>\u042f \u0431\u0443\u0434\u0443 \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0443\u0447\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443?<\/em><br \/>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e &#8212; \u0434\u0430. \u041d\u043e \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0434\u043e\u043f\u0438\u0441\u0430\u0432 <strong>\u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435<\/strong> cache: true (\u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c &#171;(string) \u043a\u043b\u044e\u0447&#187; \u0438\u043b\u0438 &#171;false&#187;). \u0423 \u043c\u0435\u043d\u044f \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0441 \u0442\u0435\u043c \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0421\u0430\u043c cache &#8212; \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u0435\u043d.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u0435\u043c Request Manager<\/h3>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u0441\u0432\u043e\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u0442\u043e\u043c \u0438\u043b\u0438 \u0438\u043d\u043e\u043c \u0432\u0438\u0434\u0435. \u0412 \u0446\u0435\u043b\u043e\u043c \u044d\u0442\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435 \u043e\u0431\u044b\u0447\u043d\u0430\u044f. \u0414\u043b\u044f \u043c\u043e\u0435\u0433\u043e \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0440\u043e\u0448\u043b\u043e \u0431\u043e\u043b\u0435\u0435 \u0434\u0432\u0443\u0445 \u043b\u0435\u0442 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043e\u0442\u0434\u0435\u043b\u0438\u0442\u044c \u044f\u0434\u0440\u043e \u043e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u0410 \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441  <a href=\"https:\/\/reqres.in\" rel=\"noopener noreferrer nofollow\">https:\/\/reqres.in<\/a> . \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0430\u043a\u0435\u0442<\/p>\n<blockquote>\n<p><em>npm install js-request-manager<\/em><\/p>\n<\/blockquote>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448\u0443 \u0441\u0445\u0435\u043c\u0443 \u0432 \u0444\u0430\u0439 RmReqres<\/p>\n<pre><code class=\"javascript\">import RequestClass   from \"js-request-manager\/src\/Class\/RequestClass\"; import RequestManager from \"js-request-manager\/src\/RequestManager\"; \/\/ const ReqresAPIRequestSchema =  {   User: {     getList: ({page = null}) => {       return new RequestClass({         name: 'User::getList',         type: 'GET',         url   : 'api:\/\/users',         get: {           page: page         }       });     },     getById: ({userId}) => { \/\/ not found 23       return new RequestClass({         name: 'User::getList',         type: 'GET',         url   : api:\/\/users\/${userId},         responsePrepare: (respData) => {           return respData.data;         },       });     },     create: ({name, job}) => { \/\/ response 201       return new RequestClass({         name: 'User::create',         type: 'POST',         url   : api:\/\/users,       });     },     update: ({userId, user }) => { \/\/ response 201       return new RequestClass({         name: 'User::update',         type: 'PUT', \/\/ or PATCH         url   : api:\/\/users,       });     },     delete: ({userId }) => { \/\/ response 204       return new RequestClass({         name: 'User::delete',         type: 'DELETE',         url   : api:\/\/users\/${userId},       });     },   } }; export default RequestManager(ReqresAPIRequestSchema,{   hostSchema: {     api: \"https:\/\/reqres.in\/api\/\"   },   RequestClient: {     name: 'FETCH',   } });<\/code><\/pre>\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u043d\u0430\u0448 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0433\u043e\u0442\u043e\u0432. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c<\/p>\n<pre><code class=\"javascript\">import RmReqres from \"RmReqres\";  RmReqres.User.getList({page: 1}).then(console.log, console.error); \/\/ RmReqres.User.getById({userId: 10}) \/\/ RmReqres.User.create({name:'', job: ''})<\/code><\/pre>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>Request Manager \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u0447\u0438\u0449\u0435 \u0438 \u0440\u0435\u0448\u0430\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u0441\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0433\u043b\u0430\u0437\u0430. \u0414\u0430 \u043e\u043d \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u0435\u043d, \u043d\u043e \u044d\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0447\u0435\u043c \u043d\u0438\u0447\u0435\u0433\u043e. \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0438 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u0435\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 &#8212; \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Store \u0438 Request Manager. \u041d\u043e \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0430\u0442\u044c store \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439. \u0414\u043b\u044f \u043c\u0435\u043d\u044f \u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0444\u0438\u0434\u0431\u0435\u043a \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043a\u0442\u043e \u0442\u043e \u0437\u0430\u0445\u043e\u0447\u0435\u0442 \u043f\u043e \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u043c, \u0430 \u043a\u0442\u043e \u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0430 \u043a\u0442\u043e \u0442\u043e \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u0432\u043e\u0435\u043c. \u0412 \u043e\u0431\u0449\u0435\u043c &#171;\u041f\u0435\u0440\u0435\u043c\u0435\u043d&#8230;&#187;)<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/569154\/\"> https:\/\/habr.com\/ru\/articles\/569154\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0440\u0435\u043c\u044f \u0438\u0434\u0435\u0442, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0440\u0430\u0441\u0442\u0443\u0442, \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0442\u044f\u0436\u0435\u043b\u0430 \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u044b. \u0412\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 API (\u043d\u043e \u043d\u0435\u0442 \u0435\u0434\u0438\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0439). \u0414\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0435\u043d REST&#8230; \u0427\u0442\u043e \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0434\u0430\u0442\u044c header (auth token), \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0438\u043f \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0430\u0434\u0440\u0435\u0441, \u0437\u0430\u0434\u0430\u0442\u044c get \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u0442\u0435\u043b\u0435 \u0438 \u0442\u0438\u043f \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u043b\u0430 (json\/multipart). \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044f \u0435\u0449\u0435 \u0447\u0442\u043e \u0442\u043e \u0443\u043f\u0443\u0441\u0442\u0438\u043b (\u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u043e REST). \u0411\u043b\u0430\u0433\u043e \u0435\u0441\u0442\u044c axios \u0438 fetch \u0438 \u043e\u043d\u0438 \u043e\u0442 \u0447\u0430\u0441\u0442\u0438 \u0440\u0435\u0448\u0430\u044e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u0412\u0440\u0435\u043c\u044f \u0438\u0434\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 &#8212; \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0441\u0442\u0435\u0442, \u0430 \u043a\u043e\u0434 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0432\u0430\u043b\u043a\u0443 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u044b. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u0430\u044e\u0442 \u043c\u0438\u043d\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u0438\u043b\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0438. \u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0436\u0435 \u0447\u0430\u0441\u0442\u044c \u0436\u0438\u0432\u0435\u0442 \u043f\u043e \u0441\u0442\u0430\u0440\u0438\u043d\u043a\u0435.<\/p>\n<p>\u042d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0436\u0438\u0442\u044c \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430\u0445 (<strong>Store<\/strong>). \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044f \u0431\u0443\u0434\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Vuex (Vue Store), \u043d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u0434\u0443\u043c\u0430\u044e \u044d\u0442\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0438 \u0434\u043b\u044f React \u0438 Angular. \u041f\u043e\u0447\u0435\u043c\u0443 Vue? \u041e\u043d \u043f\u0440\u043e\u0449\u0435 \u0447\u0435\u043c React (\u043d\u0435\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449) \u0438 \u0443 \u043c\u0435\u043d\u044f \u043d\u0430 \u043d\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u043f\u044b\u0442\u0430. \u0421 Angular &#8212; \u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b.<\/p>\n<h3>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438<\/h3>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u043c\u043e\u0439 SPA \u0431\u044b\u043b \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u044b\u0439 (\u043a\u043e\u043d\u0435\u0446 2015\u0433\u043e\u0434 &#8212; \u0431\u044b\u043b\u0430 \u043a\u0430\u043a\u0430\u044f \u0442\u043e \u0432\u0435\u0440\u0441\u0438\u044f Angular, \u043d\u043e \u043e\u043d\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0430\u043a\u0438 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0439). \u0423\u0436\u0435 \u0442\u043e\u0433\u0434\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u044b api \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u044b\u043c\u0438 \u0438 \u043d\u0430\u0434 \u044d\u0442\u0438\u043c \u0431\u044b\u043b\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043e\u0431\u0435\u0440\u0442\u043a\u0430. <\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430 \u0438\u0437 \u043c\u043e\u0435\u0433\u043e \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 api.js (\u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c).<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">function api_ajax_end(fun, status){   if (typeof window[fun] == 'function'){     window[fun](status);   } }  function api_ajax_start(type, url, info, fun){   if(type!='GET'){info = JSON.stringify(info, null, '\\t');}   var status = 0;   jQuery.ajax({             type: type,     url: url,      data: info,      contentType: 'application\/json;charset=UTF-8',      \/\/ async: false,     timeout : 3000,       headers: { \"login\": login,\"token\": token},     success: function (msg) {       if ( typeof msg == \"object\" &amp;&amp; msg['error'] === 0 &amp;&amp; typeof msg['result'] == \"object\"  ) {         status = msg['result'];       }       api_ajax_end(fun, status);     },     error: function (xhr) {        api_ajax_end(fun, -1);     }   }); }  \/** api auth info *\/ function api_auth_info(info, fun){   api_ajax_start('GET', '\/api\/v1\/auth\/', info, fun); }  \/** api user auth  { \"login\": \"string\", \"password\": \"string\" } *\/ function api_user_auth(info, fun){   api_ajax_start('POST', '\/api\/v1\/auth\/', info, fun); }  \/** api user registration  { \"login\": \"string\", \"password\": \"string\", \"email\": \"email\" } *\/ function api_user_registration(info, fun){   api_ajax_start('POST', '\/api\/v1\/users\/', info, fun); }  \/** api user edit *\/ function api_user_edit(info, fun){   api_ajax_start('PUT', '\/api\/v1\/users\/', info, fun); }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u044b\u043b\u043e \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e (10-15), \u0430 \u0441\u0430\u043c \u043a\u043e\u0434 \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u0435\u0442 \u043d\u0438 \u043d\u0430 \u0447\u0442\u043e. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0438 \u0431\u044b\u043b\u043e \u043c\u043e\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u043c SPA. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0431\u0440\u0430\u0442\u044c \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 Promise \u0438 async\/await, \u0442\u043e \u044d\u0442\u043e \u0438\u0434\u0435\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u043b\u0443\u0447\u0448\u0435 \u0447\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 middle \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u0441\u0435\u0439\u0447\u0430\u0441 (\u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 axios \u0438\u043b\u0438 fetch, \u0433\u0434\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e).<\/p>\n<h3>\u0420\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/h3>\n<p>\u0423\u0432\u044b \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0438 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432 axios \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u0443\u0441\u043a\u0438 \u043a\u043e\u0434\u0430 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 Vue JS<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0433\u0434\u0435 \u0442\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 $axios.interceptors.request.use(function(config) {   config.headers['Authorization'] = 'Bearer ' + store.state.token   return config })  \/\/ \u0438 \u0433\u0434\u0435 \u0442\u043e \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441\u0442\u043e\u0440\u0430  {   \/\/ ...   actions: {     async getUser({ commit, state }) {       await this.$axios         .get(\"api.server.net\/form\")         .then(({ data: { data, countries } }) => {           commit(\"setUserData\", data);           commit(\"setCountries\", countries);         })         .catch(error => {           console.log(\"Error: \", error);         });     },     \/\/ ...   } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u0432\u0438\u043d\u043e\u0432\u0430\u0442 Vue JS, \u043d\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u044d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0435\u0441\u0442\u044c \u0438 \u0432 React. C Angular \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043e\u0447\u0435\u043d\u044c \u0434\u0430\u0432\u043d\u043e \u0438 \u043c\u0430\u043b\u043e, \u043d\u043e \u0441\u0443\u0434\u044f \u043f\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438  \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c, \u044d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0435\u0441\u0442\u044c \u0438 \u0442\u0430\u043c. <\/p>\n<p>\u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0435\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0430 \u043a\u0430\u043a \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c axios \u043a\u043e\u043d\u0444\u0438\u0433\u0435 (headers Authorization &#8212; \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430), \u0442\u0430\u043a \u0438 \u0437\u0430\u0445\u043e\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u044b \u0434\u0430\u043d\u043d\u044b\u0435 url \u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043a\u0438. \u0411\u0443\u0434\u0435\u043c \u0447\u0435\u0441\u0442\u043d\u044b &#8212; \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434 (\u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0445\u0443\u0434\u0448\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432), \u043d\u043e \u044d\u0442\u043e \u0436\u0438\u0432\u0435\u0442 \u0432 \u043a\u0430\u043a\u043e\u043c \u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u042f \u043d\u0435 \u0445\u043e\u0447\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u043e\u0434 junior \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043d\u0430 \u0433\u0430\u043b\u0435\u0440\u0430\u0445) \u0438 \u0440\u0435\u0448\u0430\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440\u0430 &#8212; \u0447\u0435\u0440\u0435\u0437 setTimeout 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b. <\/p>\n<h3>Store &#8212; \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e&#8230;<\/h3>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 store \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 &#8212; \u043d\u0435 \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d\u043e \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442. \u041c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 @.. \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432 \u043c\u0435\u043d\u044f, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e \u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u043a\u0442\u043e \u0442\u043e \u0441\u043a\u0430\u0437\u0430\u043b &#8212; &#171;store \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0438 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u043d\u0435 \u043a\u0443\u0434\u0430&#187;. \u0414\u0430 store &#8212; \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e, \u0443 store \u0435\u0441\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0434\u0435\u0431\u0430\u0433\u0430 (\u043d\u043e \u043d\u0443\u0436\u0435\u043d \u043b\u0438 \u043e\u043d \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435?). \u0414\u0430 \u0438\u043c (\u0434\u0435\u0431\u0430\u0433\u043e\u043c) \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043d\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u043d\u0435 \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u043e\u043d \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0439, \u0430 \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f \u0432\u0435\u0449\u044c \u0438 \u043d\u0430\u0434\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u043e\u0442\u043a\u0443\u0434\u0430 \u0440\u0430\u0441\u0442\u0443\u0442 \u043d\u043e\u0433\u0438&#8230; \u042d\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 store (\u044f \u0432 \u043d\u0435\u043c \u0445\u0440\u0430\u043d\u044e \u043a\u0430\u043a\u0438\u0435 \u0442\u043e \u0441\u043b\u043e\u0432\u0430\u0440\u0438, \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0434\u0440. \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0449\u0438), \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u043e\u0449\u0435 \u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u043e\u0442\u0442\u0443\u0434\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e\u0435.<\/p>\n<h3>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b store <\/h3>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c\u0441\u044f \u0441 \u0442\u0435\u043c \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 &#8212; \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0443\u0447\u043a\u0430\u043c\u0438\/\u0440\u0435\u0448\u0430\u0442\u044c \u0441\u0430\u043c\u0438\u043c \u0441\u0432\u0435\u0440\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 (\u0445\u043e\u0442\u044f \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435).<\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c &#8212; \u044d\u0442\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 (\u044d\u0442\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e). <\/p>\n<\/li>\n<li>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0435\u0441\u0442\u044c \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0438 \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0438\u0445 \u0432\u0437\u044f\u0442\u044c \u0438\u0437 \u043a\u0435\u0448\u0430 (\u044d\u0442\u043e \u0442\u0430\u043a \u0436\u0435 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0440\u0443\u0447\u043a\u0430\u043c\u0438).<\/p>\n<\/li>\n<li>\n<p>\u0422\u0440\u0435\u0442\u044c\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043a\u0438. <\/p>\n<\/li>\n<li>\n<p>\u0427\u0435\u0442\u0432\u0435\u0440\u0442\u0430\u044f &#8212; \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e id (\u043f\u043e \u0444\u0430\u043a\u0442\u0443 &#8212; \u0432\u0441\u0435 \u043a\u043b\u0430\u0434\u0443\u0442 \u0431\u043e\u043b\u0442 \u0438 \u043a\u043b\u0430\u0434\u0443\u0442 \u0432 \u043e\u0434\u043d\u0443 \u044f\u0447\u0435\u0439\u043a\u0443).<\/p>\n<\/li>\n<li>\n<p>\u041f\u044f\u0442\u0430\u044f &#8212; \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435. \u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e news store \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 \u043e\u0434\u043d\u043e\u0439 \u043d\u043e\u0432\u043e\u0441\u0442\u0438 (\u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0431\u0440\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 \u0441\u043f\u0438\u0441\u043e\u043a &#8212; \u043f\u043e \u043c\u043d\u0435 \u044d\u0442\u043e \u0442\u0430\u043a \u0436\u0435 \u043f\u043b\u043e\u0445\u043e).<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0432\u043e Vue<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">export default {   state: {     newsItem: null,   }   getters: {     \/\/ \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c, \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u044f\u043c\u0443\u044e newsItem     getNewsItem(state) { return state.newsItem; }   }   mutations: {     setNewsItem: (state, payload) => {       state.newsItem = payload;     },   }   actions: {     loadNewsItem: async (context, payload) => {       let {data} = await Axios.get('\/api\/news');       context.commit('setNewsItem', data);     },   }, };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u042d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <a href=\"https:\/\/habr.com\/ru\/post\/421551\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0447\u0442\u043e \u0437\u0430\u0433\u0443\u0433\u043b\u0438\u043b\u043e\u0441\u044c<\/a>. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 &#8212; \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b (\u0441 namespase true &#8212; \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0435\u0449\u0435 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u044b\u043c, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c).<\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c store<\/h3>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u0438 \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b &#8212; \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 state newsItemStatus: &#8216;CREATE | LOADING | SUCCESS | ERROR&#8217;. <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b &#8212; \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 newsItem \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c newsItemError. newsItemError &#8212; \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a if(newsItem) \u0432 \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435 (\u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442). <\/p>\n<p>\u0427\u0435\u0442\u0432\u0435\u0440\u0442\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 &#8212; \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c 2 \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u043d\u0430 \u0441\u0442\u0430\u043d\u0438\u0446\u0443 (\u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0449\u0435 1 store&#8230; \u043d\u043e \u044d\u0442\u043e \u0433\u043b\u0443\u043f\u043e). <\/p>\n<p>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 &#8212; \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u043d\u043e \u0435\u0439 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0435\u043d\u0435\u0431\u0440\u0435\u0433\u0430\u044e\u0442. \u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c store.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Vue Store<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import Vue from 'vue'; import newsItemPrepare from 'functionNewsItemPrepare';  const getKey = function (search) {   return 'newsItem_' + search.newsId; }; const getNew = function () {   return {     loadStatus: \"CREATE\",     request   : null, \/\/ \u0434\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441     data      : null,   error     : null,   }; };  export default {   state: {     newsItemObject: {   \/\/ newsItem_1: { loadStatus: \"CREATE\", request: null, data: null, error: null } },   },   getters: {     getNewsItem(state) {     \/\/ \u0442\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u044f\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e 1 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043f\u043e \u044d\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u043c {newsId: 12} (\u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f)       return function(search){         return state.newsItemObject[ getKey(search) ] ? state.newsItemObject[ getKey(search) ] : null;       };     },   \/\/ + getNewsItemStatus(), getNewsItemError()   },   mutations: {     setNewsItem (state, {search, data=null, error=null}) {       var key = getKey(search);       state.newsItemObject[ key ].loadStatus = data ? 'SUCCESS' : 'ERROR';       state.newsItemObject[ key ].request    = 'null';       state.newsItemObject[ key ].data       = data;       state.newsItemObject[ key ].error      = error;     },     clearNewsItem (state) {       state.newsItemObject = {};     },   },   actions: {     async getNewsItem({ state, getters, commit, dispatch }, search) {       \/\/ \u041e\u0447\u0438\u0441\u0442\u0438\u043c \u0438\u043b\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c       Vue.set(state.newsItemObject, key, getNew());       Vue.set(state.newsItemObject[key], 'loadStatus', 'LOADING');        \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u044f \u0443\u043f\u0440\u043e\u0449\u0443 \u0441 30-40 \u0441\u0442\u0440\u043e\u043a \u0434\u043e     try {         let request = Axios.get('\/api\/news');         Vue.set(state.newsItemObject[key], 'request', request);       let {data} = await request;         commit('setNewsItem', {search: search, data: newsItemPrepare(data)});     } catch (e) {         commit('setNewsItem', {search: search, error: e});     }     }   } };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0444\u0430\u0439\u043b\u044b \u043f\u043e 100 \u0441\u0442\u0440\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u044b \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0437\u0433\u043b\u044f\u0434\u0430 (\u0438 \u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0442\u043e\u0436\u0435). \u0422\u0430\u043a \u0436\u0435 \u043d\u0435\u0434\u043e\u0443\u043c\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0430\u043c \u0432\u0441\u0435 \u044d\u0442\u043e&#8230; \u041e\u0442\u0432\u0435\u0442 &#8212; \u043f\u0440\u043e\u0441\u0442, \u0447\u0442\u043e\u0431 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e Store \u0432\u043e Vue<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ &lt;tempate if=\"newsStatus === 'CREATE' || newsStatus === 'LOADING'\">loading ...&lt;\/tempate> \/\/ &lt;tempate if=\"newsStatus === 'SUCCESS'\">{{news.name}}&lt;\/tempate> \/\/ &lt;tempate if=\"newsStatus === 'ERROR'\">error ...&lt;\/tempate>  computed: {   newsStatus(){     store.getNewsItemStatus({newsId: 10});    }   news(){     store.getNewsItem({newsId: 10});    } } create(){   if(newsStatus === 'CREATE') {     store.loadNewsItem({newsId: 10});   } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u042d\u0442\u043e \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u0435\u0449\u0435 \u043f\u0430\u0440\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0440\u0435\u0448\u0430\u0442\u044c. \u041e\u0434\u043d\u0438 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 &#8212; \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439 (\u0441\u0435\u0442\u0435\u0432\u0430\u044f \u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f) \u0438\u043b\u0438 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 alert. \u0412 \u0442\u0430\u043a\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0438 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u0430.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-387055","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/387055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=387055"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/387055\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=387055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=387055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=387055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}