{"id":356581,"date":"2024-05-20T23:32:43","date_gmt":"2024-05-20T23:32:43","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=356581"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-20T23:32:43","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=356581","title":{"rendered":"<span>\u041a\u0430\u043a \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c Vuex Store<\/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\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0439\u043c\u0435\u043c, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0432\u0430\u043c \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c Vuex Store \u0438\u043b\u0438 \u043d\u0435\u0442, \u0438 \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0442\u0447\u0430\u044f\u043d\u043d\u044b, \u043f\u043e\u0439\u043c\u0435\u043c, \u043a\u0430\u043a \u0435\u0433\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0433\u0438\u0431\u043d\u0443\u0442\u044c.<\/p>\n<h2>\u0410 \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u043e ?<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/566\/5f1\/bf1\/5665f1bf1e9ebd3947eac1182231004e.jpg\" alt=\"\u041c\u043e\u0436\u043d\u043e \u043d\u0435\u043d\u0430\u0434\u043e\" title=\"\u041c\u043e\u0436\u043d\u043e \u043d\u0435\u043d\u0430\u0434\u043e\" width=\"960\" height=\"843\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/566\/5f1\/bf1\/5665f1bf1e9ebd3947eac1182231004e.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u041c\u043e\u0436\u043d\u043e \u043d\u0435\u043d\u0430\u0434\u043e<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0443\u0442 \u044f \u0431\u044b <strong>\u043d\u0435 \u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u043b<\/strong> \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e Vuex \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>Vuex \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0430\u043f\u0434\u0435\u0439\u0442\u0438\u0442\u0441\u044f &#8212; \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 Vuex \u044d\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e &#8212; <a href=\"https:\/\/vuex.vuejs.org\" rel=\"noopener noreferrer nofollow\">\u0442\u044b\u043a<\/a>, \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 State Manager &#8212; <a href=\"https:\/\/pinia.vuejs.org\" rel=\"noopener noreferrer nofollow\">Pinia<\/a>. \u041f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u0432 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0435 \u043d\u0438\u0436\u0435, \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0430\u0446\u0438\u0435\u043d\u0442 \u043c\u0435\u0440\u0442\u0432)))<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p><strong>Pinia is now the new default<br \/><\/strong>The official state management library for Vue has changed to\u00a0<a href=\"https:\/\/pinia.vuejs.org\/\" rel=\"noopener noreferrer nofollow\">Pinia<\/a>. Pinia has almost the exact same or enhanced API as Vuex 5, described in\u00a0<a href=\"https:\/\/github.com\/vuejs\/rfcs\/pull\/271\" rel=\"noopener noreferrer nofollow\">Vuex 5 RFC<\/a>. You could simply consider Pinia as Vuex 5 with a different name. Pinia also works with Vue 2.x as well.<\/p>\n<\/blockquote>\n<ul>\n<li>\n<p>Vuex \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 JS, \u0430 \u0447\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430 TS, \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 AnyScript. \u0412\u043e\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0435\u0432 Vuex \u0438 Pinia, \u043a\u0430\u043a \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e(\u0442\u0443\u0442 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e primary language \u0443 Pinia &#8212; TS, Vuex &#8212; JS).<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/611\/6b1\/479\/6116b14796fac181270fa3aea9a5d9c5.png\" alt=\"Vuex \u0433\u0440\u0443\u0441\u0442\u043d\u043e \u0432 \u0435\u0433\u043e \u0440\u0435\u043f\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043a\u043e\u043c\u043c\u0438\u0442\u0438\u0442\" title=\"Vuex \u0433\u0440\u0443\u0441\u0442\u043d\u043e \u0432 \u0435\u0433\u043e \u0440\u0435\u043f\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043a\u043e\u043c\u043c\u0438\u0442\u0438\u0442\" width=\"1966\" height=\"588\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/611\/6b1\/479\/6116b14796fac181270fa3aea9a5d9c5.png\"\/><\/p>\n<div><figcaption>Vuex \u0433\u0440\u0443\u0441\u0442\u043d\u043e \u0432 \u0435\u0433\u043e \u0440\u0435\u043f\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043a\u043e\u043c\u043c\u0438\u0442\u0438\u0442<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u044b \u0432\u0441\u0435 \u0435\u0449\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c Vuex, \u0442\u043e \u043f\u043e\u0433\u043d\u0430\u043b\u0438<\/p>\n<h3>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b83\/196\/f55\/b83196f5591880a9b2ce4d8934f037d3.webp\" alt=\"\u041f\u043e\u0440\u0430\" title=\"\u041f\u043e\u0440\u0430\" width=\"921\" height=\"750\"\/><\/p>\n<div><figcaption>\u041f\u043e\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 <em>Todo \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/em>.<\/p>\n<h3>\u0422\u0438\u043f\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e TodoModule<\/h3>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0430\u043b\u0438\u0430\u0441\u044b \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0438\u043f\u0430\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 \u0441 \u0442\u0438\u043f\u0430\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f, \u0434\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u044d\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f.<\/p>\n<pre><code class=\"typescript\">type State = TodoState; type Mutations = TodoMutations; type Getters = TodoGetters; type Actions = TodoActions;<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f State:<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0443\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u043f\u0438\u0448\u0435\u043c \u0442\u0443\u0434\u0430 \u043d\u0430\u0448\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p><em>state.ts<\/em><\/p>\n<pre><code class=\"typescript\">export interface TodoState {   todos: {     name: string;     completed: boolean;   }[]; }<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f Mutations<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0443\u0442 \u0442\u0430\u043a\u0436\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448\u0438 Mutations \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0432\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f <em>State<\/em>, \u0430 \u0432\u0442\u043e\u0440\u044b\u043c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f <em>payload<\/em>:<\/p>\n<pre><code class=\"typescript\">export interface TodoMutations {   addTodo(state: State, payload: State['todos'][number]): void;    deleteTodo(state: State, payload: State['todos'][number]): void;    setTodos(state: State, payload: State['todos']): void; }<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f Actions<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>Actions \u0442\u0430\u043a\u0436\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441 \u043f\u0435\u0440\u0432\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c, <em>ActionContext({ dispatch, commit, state, getters, rootState, rootGetters })<\/em> \u0438 \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c <em>payload<\/em>.<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e ActionContext \u0438\u0437 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 Vuex, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u043d\u0430 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<details class=\"spoiler\">\n<summary>Vuex Action Context<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">export interface ActionContext&lt;S, R> {   dispatch: Dispatch;   commit: Commit;   state: S;   getters: any;   rootState: R;   rootGetters: any; }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0432\u0434\u0440\u0443\u0433 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u044d\u0442\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c getters \u0438\u043b\u0438 rootGeters, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441:<\/p>\n<details class=\"spoiler\">\n<summary>Custom Action Context<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">export interface CustomActionsContext {   dispatch: YourDispatchType;   commit: YourCommitType;   state: YourStateType;   getters: YourGettersType;   rootState: YourRootStateType;   rootGetters: YourRootGettersType; }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 TodoActions<\/p>\n<pre><code class=\"typescript\">import { ActionContext } from 'vuex'; import { RootState } from '.\/store';  type MyActionContext = ActionContext&lt;State, RootState>;  export interface TodoActions {      getTodos({ commit }: MyActionContext): Promise&lt;void>;      addTodo({ commit }: MyActionContext, payload: State['todos'][number]): Promise&lt;void>;    deleteTodo({ commit }: MyActionContext, payload: State['todos'][number]): Promise&lt;void>; }<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f Getters<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c Getters \u0447\u0443\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043e\u043d\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0435 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441\u044b:<\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0432 Getters \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0438\u043a\u0430\u043a\u043e\u0439 <em>payload<\/em>, \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p>\n<pre><code class=\"typescript\">getterName(state: State, getters: Getters, rootState: RootState): ReturnType;<\/code><\/pre>\n<p> \u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432 Getters \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f <em>payload<\/em>, \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a<\/p>\n<pre><code class=\"typescript\">getterName(state: State, getters: Getters, rootState: RootState): (parameters: parametersType) => ReturnType;<\/code><\/pre>\n<p>\u041c\u043e\u0439 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 TodoGetters<\/p>\n<pre><code class=\"typescript\">export interface TodoGetters {   getTodosByReadiness(state: State): (isCompleted: boolean) => State['todos']; }<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f Module<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u0448\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u043e\u0433\u0430\u0449\u0430\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0442\u0438\u043f \u043c\u043e\u0434\u0443\u043b\u044f Vuex Store, \u043f\u043e \u0441\u0443\u0442\u0438 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c Mutations, Actions \u0438 Getters \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u043d\u0430\u043c\u0438 \u0442\u0438\u043f\u043e\u0432(\u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0442\u0443\u0442 \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0439 \u0443 commit, dispatch, getters, \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0442\u043e\u0436\u0435 \u0431\u044b\u043b\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b)<\/p>\n<pre><code class=\"typescript\">import { CommitOptions, DispatchOptions, Store as VuexStore } from 'vuex';  export type TodoModule = Omit&lt;VuexStore&lt;State>,   'getters' | 'commit' | 'dispatch'> &amp; {   commit&lt;K extends keyof Mutations, P extends Parameters&lt;Mutations[K]>[1]>(     key: K,     payload?: P,     options?: CommitOptions,   ): ReturnType&lt;Mutations[K]> } &amp; {   dispatch&lt;K extends keyof Actions>(     key: K,     payload?: Parameters&lt;Actions[K]>[1],     options?: DispatchOptions,   ): ReturnType&lt;Actions[K]> } &amp; {   getters: {     [K in keyof Getters]: ReturnType&lt;Getters[K]>   } }<\/code><\/pre>\n<p><strong>\u0418\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b:<\/strong><\/p>\n<details class=\"spoiler\">\n<summary>types\/todo\/store.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { CommitOptions, DispatchOptions, Store as VuexStore, ActionContext } from 'vuex'; import { RootState } from '.\/store';  type State = TodoState; type Mutations = TodoMutations; type Getters = TodoGetters; type Actions = TodoActions;  export interface TodoState {   todos: {     name: string;     completed: boolean;   }[]; }  export interface TodoGetters {   getTodosByReadiness(state: State): (isCompleted: boolean) => State['todos']; }  export interface TodoMutations {   addTodo(state: State, payload: State['todos'][number]): void;    deleteTodo(state: State, payload: State['todos'][number]): void;    setTodos(state: State, payload: State['todos']): void; }  type MyActionContext = ActionContext&lt;State, RootState>;  export interface TodoActions {      getTodos({ commit }: MyActionContext): Promise&lt;void>;      addTodo({ commit }: MyActionContext, payload: State['todos'][number]): Promise&lt;void>;    deleteTodo({ commit }: MyActionContext, payload: State['todos'][number]): Promise&lt;void>; }  export type TodoModule = Omit&lt;VuexStore&lt;State>,   'getters' | 'commit' | 'dispatch'> &amp; {   commit&lt;K extends keyof Mutations, P extends Parameters&lt;Mutations[K]>[1]>(     key: K,     payload?: P,     options?: CommitOptions,   ): ReturnType&lt;Mutations[K]> } &amp; {   dispatch&lt;K extends keyof Actions>(     key: K,     payload?: Parameters&lt;Actions[K]>[1],     options?: DispatchOptions,   ): ReturnType&lt;Actions[K]> } &amp; {   getters: {     [K in keyof Getters]: ReturnType&lt;Getters[K]>   } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043d\u0430\u0448\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432<\/h3>\n<details class=\"spoiler\">\n<summary>store\/modules\/todo.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">\/\/ \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 import {   TodoActions as Actions,   TodoGetters as Getters,   TodoMutations as Mutations,   TodoState as State, } from '@\/types\/todo\/store'; \/\/ \u0422\u0438\u043f\u044b \u0438\u0437 \u0441\u0430\u043c\u043e\u0433\u043e Vuex \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 import { ActionTree, GetterTree, Module, MutationTree } from 'vuex'; import { RootState } from '@\/types\/store';  \/\/ \u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c State const state: () => State = () => ({   todos: [], });  \/\/ \u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c Getter \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 + \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0438\u0437 Vuex const getters: GetterTree&lt;State, RootState> &amp; Getters = {   getTodosByReadiness(state) => (isCompleted) => state.todos.filter((todo) => todo.completed === isCompleted); };  \/\/ \u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c Mutations \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u0442\u0438\u043f\u0430 + \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0438\u0437 Vuex const mutations: MutationTree&lt;State> &amp; Mutations = {   addTodo(state, todo) {     state.todos.unshift(todo);   }    deleteTodo(state, todo) {     state.todos = state.todos.filter((t) => t.name !== todo.name)   }    setTodos(state, todos) {     state.todos = todos;   } };  \/\/ \u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c Actions \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u0442\u0438\u043f\u0430 + \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0438\u0437 Vuex const actions: ActionTree&lt;State, RootState> &amp; Actions = {   async getTodos({ commit }) {     const todos = await getTodos();     commit('setTodos', todos);   }      async addTodo({ commit }, todo) {     await addTodo(todo);     commit('addTodo', todo);   }    async deleteTodo({ commit }, todo) {     await deleteTodo(todo);     commit('deleteTodo', todo);   } };  \/\/ \u042d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u043c \u043c\u043e\u0434\u0443\u043b\u044c \u0441 \u0442\u0438\u043f\u0430\u043c\u0438 const todo: Module&lt;State, RootState> = {   state,   mutations,   getters,   actions, };  export default todo;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u0432\u044b\u0448\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e:<\/p>\n<ol>\n<li>\n<p>\u041c\u044b \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438 State \u043a\u0430\u043a () => State, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 State, \u0432\u0441\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p>\u041c\u044b \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438 Mutations, Getters, Actions \u043a\u0430\u043a intersection \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0448\u0438\u043c \u0442\u0438\u043f\u043e\u043c \u0438 \u0442\u0438\u043f\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 Vuex \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u043d\u0430\u0448\u0438 mutations, getters, actions \u0432 Module \u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<\/li>\n<li>\n<p>\u042d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043d\u0430\u0448 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c.<\/p>\n<\/li>\n<\/ol>\n<h3>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0448\u0442\u0440\u0438\u0445<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/fd0\/bcb\/2f1\/fd0bcb2f17b5a26ea88a3579912d9056.jpeg\" alt=\"\u0424\u0438\u043d\u0430\u043b \u0431\u043b\u0438\u0437\u043e\u043a\" title=\"\u0424\u0438\u043d\u0430\u043b \u0431\u043b\u0438\u0437\u043e\u043a\" width=\"1200\" height=\"675\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fd0\/bcb\/2f1\/fd0bcb2f17b5a26ea88a3579912d9056.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0424\u0438\u043d\u0430\u043b \u0431\u043b\u0438\u0437\u043e\u043a<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0449\u0438\u0445 \u0442\u0438\u043f\u043e\u0432, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e.<\/p>\n<p><em>types\/store.ts<\/em><\/p>\n<pre><code class=\"typescript\">import { TodoState, TodoModule } from '@\/types\/todo\/store'; export interface StateProps {   \/\/ \u0421\u044e\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u0430\u0448\u0438 \u0441\u0442\u0435\u0439\u0442   state: {     todo: TodoState;   } }  export type RootState = StateProps['state'];  \/\/ \u0421\u044e\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0435 \u0432\u0430\u0448\u0438 \u043c\u043e\u0434\u0443\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 &amp; export type StoreType = StateProps &amp; TodoModule;<\/code><\/pre>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442:<\/p>\n<p><em>StateProps &#8212; \u0412\u0441\u0435 \u043d\u0430\u0448\u0438 State \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435<\/em><\/p>\n<ol>\n<li>\n<p>\u0418\u0437 \u043d\u0435\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0431\u0440\u0430\u0442\u044c RootState<\/p>\n<\/li>\n<li>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0442\u0438\u043f\u0435 \u0434\u043b\u044f Store(\u043e\u043d \u0438\u0442\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043d\u043e \u0443 \u043c\u0435\u043d\u044f \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043d\u0435 \u0437\u0430\u0432\u0435\u043b\u043e\u0441\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0441\u0442\u044b\u043b\u044c)<\/p>\n<\/li>\n<\/ol>\n<p><em>RootState &#8212; \u0422\u0443\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e<\/em><\/p>\n<p><em>StoreType &#8212; \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0442\u043e\u0440\u0430 \u0441 State, Mutations, Actions, Getters<\/em><\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u044d\u0442\u043e \u0432\u0441\u0435 \u0432 \u043d\u0430\u0448\u0435\u043c Store<\/h3>\n<p>\u0422\u0443\u0442 \u043c\u044b \u0434\u0430\u0435\u043c \u0442\u0438\u043f \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0443 <em>store<\/em> \u0438 \u0445\u0443\u043a\u0443 <em>useStore,<\/em> \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044f \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0438\u0445, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 Store.<\/p>\n<pre><code class=\"typescript\">import { createStore, useStore as VuexStore } from 'vuex'; import { todo } from '@\/store\/modules\/todo'; import { StoreType } from '@\/types\/store';   const store: StoreType = createStore({   modules: {     todo   }, });   export function useStore(): StoreType {   return VuexStore() as StoreType; }  export default store; <\/code><\/pre>\n<h3>\u0427\u0435\u043a\u043b\u0438\u0441\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e Store<\/h3>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0439<\/summary>\n<div class=\"spoiler__content\">\n<ol>\n<li>\n<p>\u041d\u0430\u043f\u0438\u0441\u0430\u043b \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e Store<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u043f\u0438\u0441\u0430\u043b \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u044d\u0442\u0438\u0445 \u0442\u0438\u043f\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043b \u0432 <em>StateProps <\/em>\u0438 <em>StoreType <\/em>\u043d\u0443\u0436\u043d\u044b \u0442\u0438\u043f\u044b<\/p>\n<\/li>\n<li>\n<p>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b \u0441\u0430\u043c Store<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0448\u044c Store\/useStore \u043d\u0435 \u0438\u0437 Vuex, \u0430 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430, \u0433\u0434\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b Store<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u0439\u0444\u0430\u043d\u0443\u043b \u043e\u0442 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<\/ol>\n<\/div>\n<\/details>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/8d1\/4ae\/5a2\/8d14ae5a2ab84e71170a225f2bb4c3f3.jpg\" alt=\"\u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0443\u0441\u043f\u0435\u0445\" title=\"\u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0443\u0441\u043f\u0435\u0445\" width=\"718\" height=\"712\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8d1\/4ae\/5a2\/8d14ae5a2ab84e71170a225f2bb4c3f3.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0443\u0441\u043f\u0435\u0445<\/figcaption><\/div>\n<\/figure>\n<hr\/>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439, \u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c\u00a0<a href=\"https:\/\/t.me\/frontendforthesoul\" rel=\"noopener noreferrer nofollow\"><strong>\u0422\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u041a\u0430\u043d\u0430\u043b<\/strong><\/a>, \u0433\u0434\u0435 \u044f \u043f\u0438\u0448\u0443 \u043f\u0440\u043e \u043d\u043e\u0432\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435, \u0434\u0435\u043b\u044e\u0441\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u043c\u0438 \u043a\u043d\u0438\u0436\u043a\u0430\u043c\u0438 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c\u0438 \u0441\u0442\u0430\u0442\u044c\u044f\u043c\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0430\u0432\u0442\u043e\u0440\u043e\u0432.<\/p>\n<\/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\/765164\/\"> https:\/\/habr.com\/ru\/articles\/765164\/<\/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\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0439\u043c\u0435\u043c, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0432\u0430\u043c \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c Vuex Store \u0438\u043b\u0438 \u043d\u0435\u0442, \u0438 \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0442\u0447\u0430\u044f\u043d\u043d\u044b, \u043f\u043e\u0439\u043c\u0435\u043c, \u043a\u0430\u043a \u0435\u0433\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0433\u0438\u0431\u043d\u0443\u0442\u044c.<\/p>\n<h2>\u0410 \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u043e ?<\/h2>\n<figure class=\"full-width\">\n<div><figcaption>\u041c\u043e\u0436\u043d\u043e \u043d\u0435\u043d\u0430\u0434\u043e<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0443\u0442 \u044f \u0431\u044b <strong>\u043d\u0435 \u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u043b<\/strong> \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e Vuex \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>Vuex \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0430\u043f\u0434\u0435\u0439\u0442\u0438\u0442\u0441\u044f &#8212; \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 Vuex \u044d\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e &#8212; <a href=\"https:\/\/vuex.vuejs.org\" rel=\"noopener noreferrer nofollow\">\u0442\u044b\u043a<\/a>, \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 State Manager &#8212; <a href=\"https:\/\/pinia.vuejs.org\" rel=\"noopener noreferrer nofollow\">Pinia<\/a>. \u041f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u0432 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0435 \u043d\u0438\u0436\u0435, \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0430\u0446\u0438\u0435\u043d\u0442 \u043c\u0435\u0440\u0442\u0432)))<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p><strong>Pinia is now the new default<br \/><\/strong>The official state management library for Vue has changed to\u00a0<a href=\"https:\/\/pinia.vuejs.org\/\" rel=\"noopener noreferrer nofollow\">Pinia<\/a>. Pinia has almost the exact same or enhanced API as Vuex 5, described in\u00a0<a href=\"https:\/\/github.com\/vuejs\/rfcs\/pull\/271\" rel=\"noopener noreferrer nofollow\">Vuex 5 RFC<\/a>. You could simply consider Pinia as Vuex 5 with a different name. Pinia also works with Vue 2.x as well.<\/p>\n<\/blockquote>\n<ul>\n<li>\n<p>Vuex \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 JS, \u0430 \u0447\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430 TS, \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 AnyScript. \u0412\u043e\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0435\u0432 Vuex \u0438 Pinia, \u043a\u0430\u043a \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e(\u0442\u0443\u0442 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e primary language \u0443 Pinia &#8212; TS, Vuex &#8212; JS).<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\">\n<div><figcaption>Vuex \u0433\u0440\u0443\u0441\u0442\u043d\u043e \u0432 \u0435\u0433\u043e \u0440\u0435\u043f\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043a\u043e\u043c\u043c\u0438\u0442\u0438\u0442<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u044b \u0432\u0441\u0435 \u0435\u0449\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c Vuex, \u0442\u043e \u043f\u043e\u0433\u043d\u0430\u043b\u0438<\/p>\n<h3>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e<\/h3>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u043e\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 <em>Todo \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/em>.<\/p>\n<h3>\u0422\u0438\u043f\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e TodoModule<\/h3>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0430\u043b\u0438\u0430\u0441\u044b \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0438\u043f\u0430\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 \u0441 \u0442\u0438\u043f\u0430\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f, \u0434\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u044d\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f.<\/p>\n<pre><code class=\"typescript\">type State = TodoState; type Mutations = TodoMutations; type Getters = TodoGetters; type Actions = TodoActions;<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f State:<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0443\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u043f\u0438\u0448\u0435\u043c \u0442\u0443\u0434\u0430 \u043d\u0430\u0448\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p><em>state.ts<\/em><\/p>\n<pre><code class=\"typescript\">export interface TodoState {   todos: {     name: string;     completed: boolean;   }[]; }<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f Mutations<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0443\u0442 \u0442\u0430\u043a\u0436\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448\u0438 Mutations \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0432\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f <em>State<\/em>, \u0430 \u0432\u0442\u043e\u0440\u044b\u043c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f <em>payload<\/em>:<\/p>\n<pre><code class=\"typescript\">export interface TodoMutations {   addTodo(state: State, payload: State['todos'][number]): void;    deleteTodo(state: State, payload: State['todos'][number]): void;    setTodos(state: State, payload: State['todos']): void; }<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f Actions<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>Actions \u0442\u0430\u043a\u0436\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441 \u043f\u0435\u0440\u0432\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c, <em>ActionContext({ dispatch, commit, state, getters, rootState, rootGetters })<\/em> \u0438 \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c <em>payload<\/em>.<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e ActionContext \u0438\u0437 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 Vuex, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u043d\u0430 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<details class=\"spoiler\">\n<summary>Vuex Action Context<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">export interface ActionContext&lt;S, R> {   dispatch: Dispatch;   commit: Commit;   state: S;   getters: any;   rootState: R;   rootGetters: any; }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0432\u0434\u0440\u0443\u0433 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u044d\u0442\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c getters \u0438\u043b\u0438 rootGeters, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441:<\/p>\n<details class=\"spoiler\">\n<summary>Custom Action Context<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">export interface CustomActionsContext {   dispatch: YourDispatchType;   commit: YourCommitType;   state: YourStateType;   getters: YourGettersType;   rootState: YourRootStateType;   rootGetters: YourRootGettersType; }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 TodoActions<\/p>\n<pre><code class=\"typescript\">import { ActionContext } from 'vuex'; import { RootState } from '.\/store';  type MyActionContext = ActionContext&lt;State, RootState>;  export interface TodoActions {      getTodos({ commit }: MyActionContext): Promise&lt;void>;      addTodo({ commit }: MyActionContext, payload: State['todos'][number]): Promise&lt;void>;    deleteTodo({ commit }: MyActionContext, payload: State['todos'][number]): Promise&lt;void>; }<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f Getters<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c Getters \u0447\u0443\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043e\u043d\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0435 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441\u044b:<\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0432 Getters \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0438\u043a\u0430\u043a\u043e\u0439 <em>payload<\/em>, \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p>\n<pre><code class=\"typescript\">getterName(state: State, getters: Getters, rootState: RootState): ReturnType;<\/code><\/pre>\n<p> \u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432 Getters \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f <em>payload<\/em>, \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a<\/p>\n<pre><code class=\"typescript\">getterName(state: State, getters: Getters, rootState: RootState): (parameters: parametersType) => ReturnType;<\/code><\/pre>\n<p>\u041c\u043e\u0439 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 TodoGetters<\/p>\n<pre><code class=\"typescript\">export interface TodoGetters {   getTodosByReadiness(state: State): (isCompleted: boolean) => State['todos']; }<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f Module<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u0448\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u043e\u0433\u0430\u0449\u0430\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0442\u0438\u043f \u043c\u043e\u0434\u0443\u043b\u044f Vuex Store, \u043f\u043e \u0441\u0443\u0442\u0438 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c Mutations, Actions \u0438 Getters \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u043d\u0430\u043c\u0438 \u0442\u0438\u043f\u043e\u0432(\u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0442\u0443\u0442 \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0439 \u0443 commit, dispatch, getters, \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0442\u043e\u0436\u0435 \u0431\u044b\u043b\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b)<\/p>\n<pre><code class=\"typescript\">import { CommitOptions, DispatchOptions, Store as VuexStore } from 'vuex';  export type TodoModule = Omit&lt;VuexStore&lt;State>,   'getters' | 'commit' | 'dispatch'> &amp; {   commit&lt;K extends keyof Mutations, P extends Parameters&lt;Mutations[K]>[1]>(     key: K,     payload?: P,     options?: CommitOptions,   ): ReturnType&lt;Mutations[K]> } &amp; {   dispatch&lt;K extends keyof Actions>(     key: K,     payload?: Parameters&lt;Actions[K]>[1],     options?: DispatchOptions,   ): ReturnType&lt;Actions[K]> } &amp; {   getters: {     [K in keyof Getters]: ReturnType&lt;Getters[K]>   } }<\/code><\/pre>\n<p><strong>\u0418\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b:<\/strong><\/p>\n<details class=\"spoiler\">\n<summary>types\/todo\/store.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import { CommitOptions, DispatchOptions, Store as VuexStore, ActionContext } from 'vuex'; import { RootState } from '.\/store';  type State = TodoState; type Mutations = TodoMutations; type Getters = TodoGetters; type Actions = TodoActions;  export interface TodoState {   todos: {     name: string;     completed: boolean;   }[]; }  export interface TodoGetters {   getTodosByReadiness(state: State): (isCompleted: boolean) => State['todos']; }  export interface TodoMutations {   addTodo(state: State, payload: State['todos'][number]): void;    deleteTodo(state: State, payload: State['todos'][number]): void;    setTodos(state: State, payload: State['todos']): void; }  type MyActionContext = ActionContext&lt;State, RootState>;  export interface TodoActions {      getTodos({ commit }: MyActionContext): Promise&lt;void>;      addTodo({ commit }: MyActionContext, payload: State['todos'][number]): Promise&lt;void>;    deleteTodo({ commit }: MyActionContext, payload: State['todos'][number]): Promise&lt;void>; }  export type TodoModule = Omit&lt;VuexStore&lt;State>,   'getters' | 'commit' | 'dispatch'> &amp; {   commit&lt;K extends keyof Mutations, P extends Parameters&lt;Mutations[K]>[1]>(     key: K,     payload?: P,     options?: CommitOptions,   ): ReturnType&lt;Mutations[K]> } &amp; {   dispatch&lt;K extends keyof Actions>(     key: K,     payload?: Parameters&lt;Actions[K]>[1],     options?: DispatchOptions,   ): ReturnType&lt;Actions[K]> } &amp; {   getters: {     [K in keyof Getters]: ReturnType&lt;Getters[K]>   } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043d\u0430\u0448\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432<\/h3>\n<details class=\"spoiler\">\n<summary>store\/modules\/todo.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">\/\/ \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 import {   TodoActions as Actions,   TodoGetters as Getters,   TodoMutations as Mutations,   TodoState as State, } from '@\/types\/todo\/store'; \/\/ \u0422\u0438\u043f\u044b \u0438\u0437 \u0441\u0430\u043c\u043e\u0433\u043e Vuex \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 import { ActionTree, GetterTree, Module, MutationTree } from 'vuex'; import { RootState } from '@\/types\/store';  \/\/ \u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c State const state: () => State = () => ({   todos: [], });  \/\/ \u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c Getter \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 + \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0438\u0437 Vuex const getters: GetterTree&lt;State, RootState> &amp; Getters = {   getTodosByReadiness(state) => (isCompleted) => state.todos.filter((todo) => todo.completed === isCompleted); };  \/\/ \u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c Mutations \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u0442\u0438\u043f\u0430 + \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0438\u0437 Vuex const mutations: MutationTree&lt;State> &amp; Mutations = {   addTodo(state, todo) {     state.todos.unshift(todo);   }    deleteTodo(state, todo) {     state.todos = state.todos.filter((t) => t.name !== todo.name)   }    setTodos(state, todos) {     state.todos = todos;   } };  \/\/ \u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c Actions \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u0442\u0438\u043f\u0430 + \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0438\u0437 Vuex const actions: ActionTree&lt;State, RootState> &amp; Actions = {   async getTodos({ commit }) {     const todos = await getTodos();     commit('setTodos', todos);   }      async addTodo({ commit }, todo) {     await addTodo(todo);     commit('addTodo', todo);   }    async deleteTodo({ commit }, todo) {     await deleteTodo(todo);     commit('deleteTodo', todo);   } };  \/\/ \u042d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u043c \u043c\u043e\u0434\u0443\u043b\u044c \u0441 \u0442\u0438\u043f\u0430\u043c\u0438 const todo: Module&lt;State, RootState> = {   state,   mutations,   getters,   actions, };  export default todo;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u0432\u044b\u0448\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e:<\/p>\n<ol>\n<li>\n<p>\u041c\u044b \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438 State \u043a\u0430\u043a () => State, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 State, \u0432\u0441\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p>\u041c\u044b \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438 Mutations, Getters, Actions \u043a\u0430\u043a intersection \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0448\u0438\u043c \u0442\u0438\u043f\u043e\u043c \u0438 \u0442\u0438\u043f\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 Vuex \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u043d\u0430\u0448\u0438 mutations, getters, actions \u0432 Module \u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<\/li>\n<li>\n<p>\u042d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043d\u0430\u0448 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c.<\/p>\n<\/li>\n<\/ol>\n<h3>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0448\u0442\u0440\u0438\u0445<\/h3>\n<figure class=\"full-width\">\n<div><figcaption>\u0424\u0438\u043d\u0430\u043b \u0431\u043b\u0438\u0437\u043e\u043a<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0449\u0438\u0445 \u0442\u0438\u043f\u043e\u0432, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e.<\/p>\n<p><em>types\/store.ts<\/em><\/p>\n<pre><code class=\"typescript\">import { TodoState, TodoModule } from '@\/types\/todo\/store'; export interface StateProps {   \/\/ \u0421\u044e\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u0430\u0448\u0438 \u0441\u0442\u0435\u0439\u0442   state: {     todo: TodoState;   } }  export type RootState = StateProps['state'];  \/\/ \u0421\u044e\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0435 \u0432\u0430\u0448\u0438 \u043c\u043e\u0434\u0443\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 &amp; export type StoreType = StateProps &amp; TodoModule;<\/code><\/pre>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442:<\/p>\n<p><em>StateProps &#8212; \u0412\u0441\u0435 \u043d\u0430\u0448\u0438 State \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435<\/em><\/p>\n<ol>\n<li>\n<p>\u0418\u0437 \u043d\u0435\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0431\u0440\u0430\u0442\u044c RootState<\/p>\n<\/li>\n<li>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0442\u0438\u043f\u0435 \u0434\u043b\u044f Store(\u043e\u043d \u0438\u0442\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043d\u043e \u0443 \u043c\u0435\u043d\u044f \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043d\u0435 \u0437\u0430\u0432\u0435\u043b\u043e\u0441\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0441\u0442\u044b\u043b\u044c)<\/p>\n<\/li>\n<\/ol>\n<p><em>RootState &#8212; \u0422\u0443\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e<\/em><\/p>\n<p><em>StoreType &#8212; \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0442\u043e\u0440\u0430 \u0441 State, Mutations, Actions, Getters<\/em><\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u044d\u0442\u043e \u0432\u0441\u0435 \u0432 \u043d\u0430\u0448\u0435\u043c Store<\/h3>\n<p>\u0422\u0443\u0442 \u043c\u044b \u0434\u0430\u0435\u043c \u0442\u0438\u043f \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0443 <em>store<\/em> \u0438 \u0445\u0443\u043a\u0443 <em>useStore,<\/em> \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044f \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0438\u0445, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 Store.<\/p>\n<pre><code class=\"typescript\">import { createStore, useStore as VuexStore } from 'vuex'; import { todo } from '@\/store\/modules\/todo'; import { StoreType } from '@\/types\/store';   const store: StoreType = createStore({   modules: {     todo   }, });   export function useStore(): StoreType {   return VuexStore() as StoreType; }  export default store; <\/code><\/pre>\n<h3>\u0427\u0435\u043a\u043b\u0438\u0441\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e Store<\/h3>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0439<\/summary>\n<div class=\"spoiler__content\">\n<ol>\n<li>\n<p>\u041d\u0430\u043f\u0438\u0441\u0430\u043b \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e Store<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u043f\u0438\u0441\u0430\u043b \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u044d\u0442\u0438\u0445 \u0442\u0438\u043f\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043b \u0432 <em>StateProps <\/em>\u0438 <em>StoreType <\/em>\u043d\u0443\u0436\u043d\u044b \u0442\u0438\u043f\u044b<\/p>\n<\/li>\n<li>\n<p>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b \u0441\u0430\u043c Store<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0448\u044c Store\/useStore \u043d\u0435 \u0438\u0437 Vuex, \u0430 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430, \u0433\u0434\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b Store<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u0439\u0444\u0430\u043d\u0443\u043b \u043e\u0442 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<\/ol>\n<\/div>\n<\/details>\n<figure class=\"full-width\">\n<div><figcaption>\u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0443\u0441\u043f\u0435\u0445<\/figcaption><\/div>\n<\/figure>\n<hr\/>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439, \u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c\u00a0<a href=\"https:\/\/t.me\/frontendforthesoul\" rel=\"noopener noreferrer nofollow\"><strong>\u0422\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u041a\u0430\u043d\u0430\u043b<\/strong><\/a>, \u0433\u0434\u0435 \u044f \u043f\u0438\u0448\u0443 \u043f\u0440\u043e \u043d\u043e\u0432\u044b\u0435<\/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-356581","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/356581","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=356581"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/356581\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=356581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=356581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=356581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}