一、Vuex概述

引用官方文档的话解释什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
设想每个Vue组件都只需要关心自己的数据和数据处理逻辑，组件之间完全独立，没有共享数据的需求，那么web应用会非常简单。 但是实际情况是，一个web应用中不同组件常常会有数据共享的需求。例如文档类型的应用，编辑的内容和大纲之间要共享数据，大纲列表组件需要根据编辑的内容生成文档大纲、电商类型的应用，商品展示列表需要根据用户选择的分类展示相应的商品，那么商品列表组件需要知道分类选项组件中用户选择的是哪个类别。 我们知道Vue父组件可以和子组件之间通过props、事件、ref引用来进行通信，但是这种组件之间的通信方式在规模较大的应用中会有些力不从心。因此我们更倾向于将不同组件通用的数据提取出来统一管理。 我们知道Vue组件根据数据渲染视图，不同的数据对应不同的视图。我们也可以理解为web应用处于不同的“状态”，每个状态对应数据的一组取值。因此我们将数据抽出来统一管理也可以称为“状态管理”。 总之，Vuex就是专为Vue.js开发的状态管理工具，用于解决组件之间数据共享的需求。 状态管理工具都需要包含哪些要素？
  1. 初始状态
  2. 改变状态
  3. 监听状态的改变

首先我们看下Vuex都有哪些API，然后说明这些API的作用。

  1. state
  2. getters
  3. mutations
  4. actions
  5. module
  6. 辅助函数：mapState、mapGetters、mapMutations、mapActions
  7. createStore

其中state和getters用来保存状态；mutations和actions用来改变状态；监听状态用的是Vue组件中的computed属性；module是用来组织整个应用的状态管理代码，使状态划分模块，更易于管理；辅助函数用来在监听状态时候简化代码，createStore则用来创建状态管理对象。

  1.   Vuex状态管理就是创建一个对象（store），这个对象上面保存了应用中大部分数据，组件可以通过store获取数据，也可以改变数据的值。上面说的这些能力一个普通的js对象也可以做到。store和普通的对象的区别是：
  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

Vuex的数据流是组件中触发Action，Action提交Mutations，Mutations修改State。 组件根据 States或Getters来渲染页面。

参考官网的图示Vuex官网。

二、Vuex基本使用

注意这里使用Vuex版本为4

基本使用

首先我们来使用Vuex中的createStore方法创建一个store，我们注意到创建store的对象中目前有state和mutations两个属性。state中保存着我们需要使用的数据 count，mutations里面是改变state中数据的方法，方法接受一个state参数，通过改变这个state参数的属性（count）的值就可以修改状态了。

执行了store.commit(‘increase’);之后，Vuex会执行mutations中的increase方法，让count加一。

  1. import {createStore} from 'vuex';
  3. const store = createStore({
  4.     state: {
  5.         count: 0
  6.     },
  7.     mutations: {
  8.         increase(state) {
  9.             state.count++;
  10.         }
  11.     }
  12. });
  13. store.commit('increase');
  15. console.log(store.state.count); // 1

mutations还可以接收参数

  1. import {createStore} from 'vuex';
  3. const store = createStore({
  4.     state: {
  5.         count: 0
  6.     },
  7.     mutations: {
  8.         increase(state, {count}) {
  9.             state.count = count;
  10.         }
  11.     }
  12. });
  13. store.commit('increase', {count: 2});
  15. console.log(store.state.count); // 2

getters

getters和state的关系类似于Vue组件data属性和computed属性的关系，getters根据state或者其他getters计算出另一个变量的值，当其依赖的数据变化时候，它也会实时更新。

  1. import {createStore} from 'vuex';
  3. const store = createStore({
  4.     state: {
  5.         count: 0
  6.     },
  7.     getters: {
  8.         msg(state) {
  9.             return state.count % 2 === 0 ? '偶数': '奇数';
  10.         }
  11.     },
  12.     mutations: {
  13.         increase(state) {
  14.             state.count++;
  15.         }
  16.     }
  17. });
  18. store.commit('increase');
  20. console.log(store.state.count, store.getters.msg); // 1 "奇数"

actions

既然已经有了mutations可以改变state，为什么还需要actions呢？因为mutations不应该用于异步修改状态。实际上mutations是可以异步修改状态的，比如：

  1. mutations: {
  2.     increase(state) {
  3.           setTimeout(() => {
  4.             state.count++;
  5.         }, 1000);
  6.     }
  7. }

但是这样做的话，Vuex是无法知道修改state.count的时机的，因为它是在异步回调里面指定的，因此Vuex无法在调试工具中打印出我们实际改变state的操作。

因此Vuex中有actions API，在actions中可以进行异步操作，在actions中可以提交mutations，也可以触发其他的action。

  2. import {createStore} from 'vuex';
  4. const store = createStore({
  5.     state: {
  6.         count: 0
  7.     },
  8.     mutations: {
  9.         increase(state) {
  10.             state.count++;
  11.         }
  12.     },
  13.     actions: {
  14.         increase(context) {
  15.             setTimeout(() => {
  16.                   // contex.dispatch可以用于触发其他action
  17.                 context.commit('increase');
  18.             }, 1000);
  19.         }
  20.     }
  21. });
  23. store.dispatch('increase');
  25. console.log(store.state.count); // 0
  27. setTimeout(() => {
  28.     console.log(store.state.count); // 1
  29. }, 1000);

三、Vuex modules

通常在一个web应用中，会有很多数据，都放在一个store里面会让数据很混乱，因此我们应该根据功能模块将数据划分成一个一个的模块。

Vuex支持将store划分成模块，并且模块还可以嵌套。

下面看官方文档上的多个模块的示例：

在调用createStore时候传入的对象中，提供modules属性，传入两个子模块。

  1. import {createStore} from 'vuex';
  2. const moduleA = {
  3.     state: {
  4.         name: 'a'
  5.     }
  6. };
  8. const moduleB = {
  9.     state: {
  10.         name: 'b'
  11.     }
  12. };
  14. const store = createStore({
  15.     modules: {
  16.         a: moduleA,
  17.         b: moduleB
  18.     }
  19. });
  21. console.log(store.state.a.name); // a
  22. console.log(store.state.b.name); // b

看下包含嵌套子模块时候，访问子模块的getters和state的示例，

下面的示例中，有两个子模块a和b，其中a中还有嵌套的子模块c，

（注意默认情况下，所有子模块的getters、mutations和actions都是注册在全局的）

  1. import {createStore} from 'vuex';
  3. const store = createStore({
  4.     state: {
  5.         counter: 0
  6.     },
  7.     getters: {
  8.         counter10times(state) {
  9.             return state.counter * 10;
  10.         }
  11.     },
  12.     modules: {
  13.         a: {
  14.             state: {aName: 'A·a'},
  15.             aGetters: {
  16.                 aFirstName(state) {
  17.                     return state.aName.split('·')[0];
  18.                 }
  19.             },
  20.             modules: {
  21.                 c: {
  22.                     state: {cName: 'C·c'},
  23.                     getters: {
  24.                         cFirstName(state) {
  25.                             return state.cName.split('·')[0];
  26.                         }
  27.                     }
  28.                 }
  29.             }
  30.         },
  31.         b: {
  32.             state: {bName: 'B·b'},
  33.             getters: {
  34.                 bFirstName(state) {
  35.                     return state.bName.split('·')[0];
  36.                 },
  37.                 bNewName(state, getters, rootState, rootGetters) {
  38.                     // 访问局部state
  39.                     const {bName} = state;
  40.                     // 访问全局state
  41.                     const {a: {c: {cName}}} = rootState;
  42.                     // 访问局部getters
  43.                     const {bFirstName} = getters;
  44.                     // 访问全局getters
  45.                     const {cFirstName} = rootGetters;
  46.                     return `${bName}  ${bFirstName}  ${cName}  ${cFirstName}`;
  47.                 }
  48.             }
  49.         }
  50.     }
  51. });
  53. // 子模块的state通过子模块路径访问
  54. console.log(store.state.a.c.cName);
  56. // 子模块的getters都注册到了全局，在store.getters下面直接能访问到
  57. console.log(store.getters.bNewName);

下面是一个多模块，commit mutation和dispatch action的示例，

模块可以提交其他模块的mutation，从而改变其他的模块的状态；模块也可以触发其他模块的action

  1. import {createStore} from 'vuex';
  3. const store = createStore({
  4.     state: {
  5.         counter: 0
  6.     },
  7.     mutations: {
  8.         increaseCounter(state) {
  9.             state.counter++;
  10.         }
  11.     },
  12.     modules: {
  13.         a: {
  14.             state: {aName: 'A·a'},
  15.             mutations: {
  16.                 changeAName(state) {
  17.                     state.aName = 'A-a';
  18.                 }
  19.             },
  20.             actions: {
  21.                 callChangeCNameAsync({dispatch}) {
  22.                     // 触发其他模块的action
  23.                     setTimeout(() => {
  24.                         dispatch('changeCNameAsync');
  25.                     }, 500);
  26.                 }
  27.             },
  28.             modules: {
  29.                 c: {
  30.                     state: {cName: 'C·c'},
  31.                     mutations: {
  32.                         changeCName(state, payload) {
  33.                             state.cName = `C-c-${payload.suffix}`;
  34.                         }
  35.                     },
  36.                     actions: {
  37.                         changeCNameAsync({commit, rootState}) {
  38.                             setTimeout(() => {
  39.                                 // 提交其他模块的mutation，mutation是全局的
  40.                                 commit('increaseCounter');
  41.                                 // 提交局部模块的mutation
  42.                                 commit('changeCName', {
  43.                                     suffix: rootState.counter
  44.                                 });
  45.                             }, 500);
  46.                         }
  47.                     }
  48.                 },
  49.             }
  50.         },
  51.         b: {
  52.             state: {bName: 'B·b'},
  53.             mutations: {
  54.                 changeBName(state) {
  55.                     state.bName = 'B-b';
  56.                 }
  57.             }
  58.         }
  59.     }
  60. });
  62. // 全局的commit
  63. store.commit('increaseCounter');
  64. console.log(store.state.counter); // 1
  66. // 子模块mutation注册到全局了
  67. store.commit('changeCName', {suffix: '123'});
  68. console.log(store.state.a.c.cName); // C-c-123
  70. // 子模块commit其他模块的mutation
  71. store.dispatch('changeCNameAsync');
  72. setTimeout(() => {
  73.     console.log(store.state.a.c.cName); // C-c-2
  74. }, 1000);
  76. // 子模块dispatch其它模块的action
  77. store.dispatch('callChangeCNameAsync');
  78. setTimeout(() => {
  79.     console.log(store.state.a.c.cName); // C-c-3
  80. }, 1500);

之前提到默认情况下，所有模块的getters、mutations和actions都是注册到全局的，这样如果多个子模块的getters、mutations和actions中有同名时候，会导致覆盖，引起问题。因此通常我们需要给子模块加命名空间。

给子模块加命名空间的方式是给子模块加namespaced属性并赋值为true。

加了命名空间后，访问state的方式不变（因为默认state也不是注册到全局的），访问getters时候需要加命名空间前缀，如果访问模块自身子模块的getters、提交mutations、触发actions时候，只需要加相对路径前缀，不需要加自身命名空间前缀，例如模块a访问其子模块c时候，不需要加’a/c’前缀，只需要’c’就可以了。

看下多模块（包含嵌套模块情况）时候访问state和getters的示例：

  1. import {createStore} from 'vuex';
  3. const store = createStore({
  4.     state: {
  5.         counter: 0
  6.     },
  7.     getters: {
  8.         counter10times(state) {
  9.             return state.counter * 10;
  10.         }
  11.     },
  12.     modules: {
  13.         a: {
  14.             namespaced: true,
  15.             state: {aName: 'A·a'},
  16.             getters: {
  17.                 aFirstName(state) {
  18.                     return state.aName.split('·')[0];
  19.                 }
  20.             },
  21.             modules: {
  22.                 c: {
  23.                     namespaced: true,
  24.                     state: {cName: 'C·c'},
  25.                     getters: {
  26.                         cFirstName(state) {
  27.                             return state.cName.split('·')[0];
  28.                         }
  29.                     }
  30.                 }
  31.             }
  32.         },
  33.         b: {
  34.             namespaced: true,
  35.             state: {bName: 'B·b'},
  36.             getters: {
  37.                 bNewName(state, getters, rootState, rootGetters) {
  38.                     // 局部state
  39.                     const bName = state.bName.split('·')[0];
  40.                     // 其他模块的getter
  41.                     const cFirstName = rootGetters['a/c/cFirstName'];
  42.                     // 其他模块的state
  43.                     const aName = rootState.a.aName;
  44.                     return `${bName} ${cFirstName} ${aName}`;
  45.                 }
  46.             }
  47.         }
  48.     }
  49. });
  51. // getters命名空间
  52. console.log(store.getters['b/bNewName']); // B C A·a
  54. // 子节点state仍然是通过节点路径访问
  55. console.log(store.state.a.c.cName); // C·c

看下在使用了命名空间的多模块的提交mutations和触发actions

  1. import {createStore} from 'vuex';
  3. const store = createStore({
  4.     state: {
  5.         counter: 0
  6.     },
  7.     mutations: {
  8.         increaseCounter(state) {
  9.             state.counter++;
  10.         }
  11.     },
  12.     modules: {
  13.         a: {
  14.             namespaced: true,
  15.             state: {aName: 'A·a'},
  16.             mutations: {
  17.                 changeAName(state) {
  18.                     state.aName = 'A-a';
  19.                 }
  20.             },
  21.             actions: {
  22.                 callChangeCNameAsync({dispatch}) {
  23.                     // 触发子模块的action，是相对于自身的路径，不需要加a前缀
  24.                     setTimeout(() => {
  25.                         dispatch('c/changeCNameAsync');
  26.                     }, 500);
  27.                 }
  28.             },
  29.             modules: {
  30.                 c: {
  31.                     namespaced: true,
  32.                     state: {cName: 'C·c'},
  33.                     mutations: {
  34.                         changeCName(state, payload) {
  35.                             state.cName = `C-c-${payload.suffix}`;
  36.                         }
  37.                     },
  38.                     actions: {
  39.                         changeCNameAsync({commit, rootState}) {
  40.                             setTimeout(() => {
  41.                                 // 提交其他模块的mutation，mutation是全局的
  42.                                 commit('increaseCounter', null, {root: true});
  43.                                 // 提交局部模块的mutation，不需要加前缀
  44.                                 commit('changeCName', {
  45.                                     suffix: rootState.counter
  46.                                 });
  47.                             }, 500);
  48.                         }
  49.                     }
  50.                 },
  51.             }
  52.         },
  53.         b: {
  54.             namespaced: true,
  55.             state: {bName: 'B·b'},
  56.             mutations: {
  57.                 changeBName(state) {
  58.                     state.bName = 'B-b';
  59.                 }
  60.             }
  61.         }
  62.     }
  63. });
  65. // 全局的commit
  66. // 注意加了命名空间之后，提交根模块的mutation和触发根模块的action时候，都需要加上{root: true}的选项
  67. store.commit('increaseCounter', null, {root: true});
  68. console.log(store.state.counter); // 1
  70. // 子模块mutation注册到全局了
  71. store.commit('a/c/changeCName', {suffix: '123'});
  72. console.log(store.state.a.c.cName); // C-c-123
  74. // 子模块commit其他模块的mutation
  75. store.dispatch('a/c/changeCNameAsync');
  76. setTimeout(() => {
  77.     console.log(store.state.a.c.cName); // C-c-2
  78. }, 1000);
  80. // 子模块dispatch其它模块的action
  81. store.dispatch('a/callChangeCNameAsync');
  82. setTimeout(() => {
  83.     console.log(store.state.a.c.cName); // C-c-3
  84. }, 1500);

四、在Vue组件中使用Vuex

1. 注入store

使用Vue3、Vuex4版本，通过如下方式向注入store，

  1. import { createApp } from 'vue';
  2. import App from './App.vue';
  3. import {createStore} from 'vuex';
  5. const store = createStore({
  6.   state: {
  7.     counter: 0
  8.   },
  9.   getters: {
  10.     counter10times(state) {
  11.       return state.counter * 10;
  12.     }
  13.   },
  14.   mutations: {
  15.     increaseCounter(state) {
  16.       state.counter++;
  17.     }
  18.   },
  19.   modules: {
  20.     a: {
  21.       namespaced: true,
  22.       state: {aName: 'A·a'},
  23.       getters: {
  24.         aFirstName(state) {
  25.           return state.aName.split('·')[0];
  26.         }
  27.       },
  28.       mutations: {
  29.         changeAName(state) {
  30.           state.aName = 'A-a';
  31.         }
  32.       },
  33.       actions: {
  34.         callChangeCNameAsync({dispatch}) {
  35.           // 触发子模块的action，相对与自身的路径
  36.           setTimeout(() => {
  37.             dispatch('c/changeCNameAsync');
  38.           }, 500);
  39.         }
  40.       },
  41.       modules: {
  42.         c: {
  43.           namespaced: true,
  44.           state: {cName: 'C·c'},
  45.           getters: {
  46.             cFirstName(state) {
  47.               return state.cName.split('·')[0];
  48.             }
  49.           },
  50.           mutations: {
  51.             changeCName(state, payload) {
  52.               state.cName = `C-c-${payload.suffix}`;
  53.             }
  54.           },
  55.           actions: {
  56.             changeCNameAsync({commit, rootState}) {
  57.               setTimeout(() => {
  58.                 // 提交其他模块的mutation，mutation是全局的
  59.                 commit('increaseCounter', null, {root: true});
  60.                 // 提交局部模块的mutation，不需要加前缀
  61.                 commit('changeCName', {
  62.                   suffix: rootState.counter
  63.                 });
  64.               }, 500);
  65.             }
  66.           }
  67.         }
  68.       }
  69.     },
  70.     b: {
  71.       namespaced: true,
  72.       state: {bName: 'B·b'},
  73.       getters: {
  74.         bNewName(state, getters, rootState, rootGetters) {
  75.           // 局部state
  76.           const bName = state.bName.split('·')[0];
  77.           // 其他模块的getter
  78.           const cFirstName = rootGetters['a/c/cFirstName'];
  79.           // 其他模块的state
  80.           const aName = rootState.a.aName;
  81.           return `${bName} ${cFirstName} ${aName}`;
  82.         }
  83.       },
  84.       mutations: {
  85.         changeBName(state) {
  86.           state.bName = 'B-b';
  87.         }
  88.       }
  89.     }
  90.   }
  91. });
  93. createApp(App).use(store).mount('#app');

将刚才的加了命名空间的store注入到Vue组件树中。这样在所有的Vue组件中，都能够通过this.$store方式访问store。

Vue组件通过computed属性来监听store的数据变化。

看下面的示例，computed依赖了this.$store里面的一些模块的state和getters，并将计算结果展示在界面上。

  1. <template>
  2.   <div>
  3.     {{counter}}
  4.     {{bName}}
  5.     {{cFirstName}}
  6.   </div>
  7. </template>
  9. <script>
  10.   export default {
  11.     computed: {
  12.       counter() {
  13.         return this.$store.state.counter;
  14.       },
  15.       bName() {
  16.         return this.$store.state.b.bName;
  17.       },
  18.       cFirstName() {
  19.         return this.$store.getters['a/c/cFirstName'];
  20.       }
  21.     }
  22.   }
  23. </script>
  25. <style>
  26.   #app {
  27.     margin-top: 60px;
  28.   }
  29. </style>

下面看下Vue组件中改变状态的示例，

可以看到Vue组件中通过methods方法调用this.$store的commit和dispatch方法来提交修改和触发action。

  1. /**
  2. * @file main.js
  3. */
  4. import { createApp } from 'vue';
  5. import App from './App.vue';
  6. import {createStore} from 'vuex';
  8. const store = createStore({
  9.     state: {
  10.         counter: 0
  11.     },
  12.     getters: {
  13.         counter10times(state) {
  14.             return state.counter * 10;
  15.         }
  16.     },
  17.     mutations: {
  18.         increaseCounter(state) {
  19.             state.counter++;
  20.         }
  21.     },
  22.     modules: {
  23.         a: {
  24.             namespaced: true,
  25.             state: {aName: 'A·a'},
  26.             getters: {
  27.                 aFirstName(state) {
  28.                     return state.aName.split('·')[0];
  29.                 }
  30.             },
  31.             mutations: {
  32.                 changeAName(state) {
  33.                     state.aName = 'A-a';
  34.                 }
  35.             },
  36.             actions: {
  37.                 callChangeCNameAsync({dispatch}) {
  38.                     // 触发子模块的action，相对于自身的路径
  39.                     setTimeout(() => {
  40.                         dispatch('c/changeCNameAsync');
  41.                     }, 500);
  42.                 }
  43.             },
  44.             modules: {
  45.                 c: {
  46.                     namespaced: true,
  47.                     state: {cName: 'C·c'},
  48.                     getters: {
  49.                         cFirstName(state) {
  50.                             return state.cName.split('·')[0];
  51.                         }
  52.                     },
  53.                     mutations: {
  54.                         changeCName(state, payload) {
  55.                             state.cName = `C-c-${payload.suffix}`;
  56.                         }
  57.                     },
  58.                     actions: {
  59.                         changeCNameAsync({commit, rootState}) {
  60.                             setTimeout(() => {
  61.                                 // 提交其他模块的mutation，mutation是全局的
  62.                                 commit('increaseCounter', null, {root: true});
  63.                                 // 提交局部模块的mutation，不需要加前缀
  64.                                 commit('changeCName', {
  65.                                     suffix: rootState.counter
  66.                                 });
  67.                             }, 500);
  68.                         }
  69.                     }
  70.                 }
  71.             }
  72.         },
  73.         b: {
  74.             namespaced: true,
  75.             state: {bName: 'B·b'},
  76.             getters: {
  77.                 bNewName(state, getters, rootState, rootGetters) {
  78.                     // 局部state
  79.                     const bName = state.bName.split('·')[0];
  80.                     // 其他模块的getter
  81.                     const cFirstName = rootGetters['a/c/cFirstName'];
  82.                     // 其他模块的state
  83.                     const aName = rootState.a.aName;
  84.                     return `${bName} ${cFirstName} ${aName}`;
  85.                 }
  86.             },
  87.             mutations: {
  88.                 changeBName(state) {
  89.                     state.bName = 'B-b';
  90.                 }
  91.             }
  92.         }
  93.     }
  94. });
  96. createApp(App).use(store).mount('#app');
  1. /**
  2. * @file App.vue
  3. */
  4. <template>
  5.     <div>
  6.         {{counter}}
  7.         {{bName}}
  8.         {{cFirstName}}
  9.         <button @click="modifyBName">修改b的name</button>
  10.         <button @click="modifyCName">修改c的name</button>
  11.     </div>
  12. </template>
  14. <script>
  15. export default {
  16.     computed: {
  17.         counter() {
  18.             return this.$store.state.counter;
  19.         },
  20.         bName() {
  21.             return this.$store.state.b.bName;
  22.         },
  23.         cFirstName() {
  24.             return this.$store.getters['a/c/cFirstName'];
  25.         }
  26.     },
  27.     methods: {
  28.         modifyBName() {
  29.             this.$store.commit('b/changeBName');
  30.         },
  31.         modifyCName() {
  32.             this.$store.dispatch('a/callChangeCNameAsync');
  33.         }
  34.     }
  35. }
  36. </script>
  38. <style>
  39. #app {
  40.     margin-top: 60px;
  41. }
  42. </style>

2. 辅助函数

我们知道我们使用Vuex时候，通过computed绑定store的state和getters的数据，通过methods中调用this.$store的commit和dispatch方法来改变状态。

但是每次都要写this.$store，当需要绑定的数据多的时候会比较繁杂，因此Vuex提供了辅助函数来简化代码。辅助函数包括

  1. mapState
  2. mapGetters
  3. mapMutations
  4. mapActions

其中mapState和mapGetters将映射到computed属性中，mapMutations和mapActions映射到methods属性中。

用法见下面示例

  1. <template>
  2.     <div>
  3.         {{counter}}
  4.         {{bName}}
  5.         {{counter10times}}
  6.         {{cFirstName}}
  7.         <button @click="modifyBName">修改b的name</button>
  8.         <button @click="modifyCName">修改c的name</button>
  9.     </div>
  10. </template>
  12. <script>
  13. import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
  15. export default {
  16.     computed: {
  17.         ...mapState({
  18.                         // 将this.$store.state.counter映射为counter
  19.             counter: state => state.counter,
  20.             // 也可以这样实现
  21.             // counter: 'counter',
  22.             bName: state => state.b.bName
  23.         }),
  24.         // 全局的getters
  25.         ...mapGetters(['counter10times']),
  26.         // 也可以这样实现，指定组件中的数据名称
  27.         // ...mapGetters({
  28.         //     counter10times: 'counter10times'
  29.         // }),
  30.         // 子模块的getters
  31.         ...mapGetters({
  32.             cFirstName: 'a/c/cFirstName'
  33.         }),
  34.         // 带有命名空间的子模块也可以这样实现映射，在方法多的时候可以简化代码
  35.         // ...mapGetters('a/c', [
  36.         //     'cFirstName'
  37.         // ])
  38.     },
  39.     methods: {
  40.         // 映射mutations到方法
  41.         ...mapMutations({
  42.             modifyBName: 'b/changeBName'
  43.         }),
  44.         // 也可以这样实现
  45.         // ...mapMutations('b', {
  46.         //     modifyBName: 'changeBName'
  47.         // }),
  48.         // 带有命名空间的子模块映射到组件的方法
  49.         ...mapActions('a', {
  50.             modifyCName: 'callChangeCNameAsync'
  51.         }),
  52.     }
  53. }
  54. </script>
  56. <style>
  57. #app {
  58.     margin-top: 60px;
  59. }
  60. </style>

3. 组件之间共享数据

上面说明了Vuex的使用方法，下面看下Vuex在组件共享数据场景的一个简单示例。

有两个子组件bChild和cChild，它们直接从store中获取数据并渲染。在根组件App.vue中修改store中的数据，可以看到子组件会相应数据更新，展示最新的数据。

  1. <template>
  2.     <div>
  3.         {{counter}}
  4.         {{counter10times}}
  5.         <b-child></b-child>
  6.         <c-child></c-child>
  7.         <button @click="modifyBName">修改b的name</button>
  8.         <button @click="modifyCName">修改c的name</button>
  9.     </div>
  10. </template>
  12. <script>
  13. import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
  14. import bChild from './components/bChild';
  15. import cChild from './components/cChild';
  17. export default {
  18.     computed: {
  19.         ...mapState({
  20.             counter: state => state.counter,
  21.             // 也可以这样实现
  22.             // counter: 'counter',
  23.         }),
  24.         // 全局的getters
  25.         ...mapGetters(['counter10times']),
  26.         // 也可以这样实现，指定组件中的数据名称
  27.         // ...mapGetters({
  28.         //     counter10times: 'counter10times'
  29.         // }),
  30.     },
  31.     components: {
  32.         'b-child': bChild,
  33.         'c-child': cChild
  34.     },
  35.     methods: {
  36.         // 映射mutations到方法
  37.         ...mapMutations({
  38.             modifyBName: 'b/changeBName'
  39.         }),
  40.         // 也可以这样实现
  41.         // ...mapMutations('b', {
  42.         //     modifyBName: 'changeBName'
  43.         // }),
  44.         // 带有命名空间的子模块映射到组件的方法
  45.         ...mapActions('a', {
  46.             modifyCName: 'callChangeCNameAsync'
  47.         }),
  48.     }
  49. }
  50. </script>
  52. <style>
  53. #app {
  54.     margin-top: 60px;
  55. }
  56. </style>

五、Vuex原理

1. 说明

Vuex通过createStore创建了一个数据中心，然后通过发布-订阅模式来让订阅者监听到数据改变。

那么Vuex是怎么应用到Vue中的呢？

先来看一个在Vue中使用Vuex的简单例子：

  1. // main.js
  2. import { createApp } from 'vue';
  3. import App from './App.vue';
  4. import {createStore} from 'vuex';
  6. const store = createStore({
  7.     state: {
  8.       message: 'hello'
  9.     },
  10.     mutations: {
  11.         change(state) {
  12.             state.message = 'world';
  13.         }
  14.     }
  15. });
  17. createApp(App).use(store).mount('#app');
  1. export default {
  2.   name: 'App',
  3.   computed: {
  4.       info() {
  5.           return this.$store.state.message;
  6.       }
  7.   },
  8.   mounted() {
  9.       this.$store.commit('change');
  10.   }
  11. }

可以看到，在Vue中使用Vuex，主要有3个关键步骤：

  1. 使用Vuex创建store，再将store注入Vue中。Vue组件中就可以通过this.$store来访问到store。
  2. Vue使用computed获取$store中的状态。
  3. Vue通过$store.commit和$store.action来修改状态。

那么我们需要问两个问题：

  1. 注入的原理是什么？为什么调用use()方法之后，就可以在组件通过$store来访问store了？
  2. 响应式原理是什么？为什么使用computed可以监听到store中的状态改变？

这两个是Vuex比较核心的两个原理。

2. 注入原理

store注入 vue的实例组件的方式，是通过vue的 mixin机制，借助vue组件的生命周期钩子beforeCreate 完成的。 
  1. Vue.mixin({
  2.     beforeCreate() {
  3.         if (this.$options && this.$options.store) {
  4.             // 找到根组件 main 上面挂一个$store
  5.             this.$store = this.$options.store;
  7.         }
  8.         else {
  9.             // 非根组件指向其父组件的$store
  10.             this.$store = this.$parent && this.$parent.$store;
  11.         }
  12.     }
  13. });

3. Vuex响应式原理

Vuex使用vue中的reactive方法将state设置为响应式，原理和Vue组件的data设置为响应式是一样的。

  1. // vuex/src/store-util.js
  2. import {reactive} from 'vue';
  4. store._state = reactive({
  5.     data: state
  6. });

4. 总结

Vuex是个状态管理器。

它Vuex通过createStore创建了一个数据中心，然后通过发布-订阅模式来让订阅者监听到数据改变。

Vuex的store注入 vue的实例组件的方式，是通过vue的 mixin机制，借助vue组件的生命周期钩子beforeCreate 完成的。这样Vue组件就能通过this.$store获取到store了。

Vuex使用vue中的reactive方法将state设置为响应式，这样组件就可以通过computed来监听状态的改变了。