36.VueJs学习-Vuex/modules

在 Vuex 中，modules 允许你将 store 分割成多个模块，每个模块拥有自己的 state、mutations、actions 和 getters。

一、为什么使用模块（modules）

1.大型应用的组织需求

当应用变得庞大复杂时，将所有的状态、 mutations、actions 和 getters 放在一个单一的 store 对象中会变得难以管理。使用 modules 可以将不同功能模块的状态管理分离，提高代码的可维护性和可读性。

2.代码复用

• 不同的功能模块可能有相似的状态管理需求，通过将这些模块拆分成独立的 modules，可以在不同的项目部分或不同的项目之间复用这些模块。

二、模块的基本结构

1.定义模块

• 每个模块都是一个对象，包含 state、mutations、actions 和 getters 属性。

     const moduleA = {
       state: {
         count: 0
       },
       mutations: {
         increment(state) {
           state.count++;
         }
       },
       actions: {
         asyncIncrement(context) {
           setTimeout(() => {
             context.commit('increment');
           }, 1000);
         }
       },
       getters: {
         doubleCount(state) {
           return state.count * 2;
         }
       }
     };

2.创建store并引入模块

• 在创建 store 对象时，可以将模块作为参数传递给 modules 属性。

     import Vuex from 'vuex';
     import moduleA from './moduleA';
  
     const store = new Vuex.Store({
       modules: {
         moduleA
       }
     });

三、模块的命名空间

1.默认命名空间

• 默认情况下，模块内部的 actions、mutations 和 getters 注册在全局命名空间下，可以直接通过 store.dispatch、store.commit 和 store.getters 访问。

2.开启命名空间

• 可以通过在模块定义中设置 namespaced: true 来开启命名空间。这样，模块内部的 actions、mutations 和 getters 需要通过模块名进行访问。

     const moduleA = {
       namespaced: true,
       state: {
         count: 0
       },
       mutations: {
         increment(state) {
           state.count++;
         }
       },
       actions: {
         asyncIncrement({ commit }) {
           setTimeout(() => {
             commit('moduleA/increment');
           }, 1000);
         }
       },
       getters: {
         doubleCount(state) {
           return state.count * 2;
         }
       }
     };

• 在这个例子中，提交 mutation 和分发 action 时都需要加上模块名作为前缀。

四、模块的访问和使用

1.访问模块状态

• 在组件中，可以通过 this.$store.state.moduleName.propertyName 来访问模块的状态。
• 例如，如果有一个名为 moduleA 的模块，其中有一个状态 count，可以通过 this.$store.state.moduleA.count 来访问。

2.提交模块mutations

• 通过 this.$store.commit('moduleName/mutationName', payload) 提交模块的 mutations。

3.分发模块actions

• 通过 this.$store.dispatch('moduleName/actionName', payload) 分发模块的 actions。

4.访问模块getters

• 通过 this.$store.getters['moduleName/getterName'] 访问模块的 getters。

总之，Vuex 的 modules 提供了一种强大的方式来组织和管理大型应用的状态，使得代码更加清晰、可维护和可复用。