47 - vuex - 分模块

一. 核心概念 - 模块 module(进阶语法)

目标:掌握核心概念 module 模块的创建

由于 vuex 使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时

store 对象就有可能变得相当臃肿。(当项目变得越来越大的时候，Vuex会变得越来越难以维护)

1. 模块拆分: 

        (1). 创建子模块

        (2). 主模块引入子模块

        (3). 浏览器vue调试工具中的vuex栏可以看到下面多一个子模块

2. 代码示例 

        (1). 定义子模块

        (2). 主模块引用子模块

        (3). 浏览器调试

二. 访问模块中的 state 

目标:掌握模块中state 的访问语法

尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的 state 中，属性名就是模块名

1. 使用模块中的数据:

         (1). 直接通过模块名访问 $store.state.模块名.xxx  

         (2). 通过 mapState 映射                

                默认根级别的映射 mapState([xxx'])

                子模块的映射 mapState('模块名',[xxx]) - 需要开启命名空间

// 子模块导出时,开启命名空间
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

2. 代码示例

        (1). 通过主模块获取

        (2). 通过主模块 & 辅助函数获取

        (3). 使用子模块命名空间 & 辅助函数获取

三. 访问模块中的 getters 

目标:掌握模块中getters 的访问语法

1. 使用模块中 getters 中的数据:

        (1). 直接通过模块名访问 $store.getters['模块名/xxx']

        (2). 通过 mapGetters 映射

                默认根级别的映射 mapGetters(['xxx'])

                子模块的映射 mapGetters('模块名', ['xxx']) - 需要开启命名空间

export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions,
  getters
}

2. 代码示例

        (1). 通过主模块原生获取

        (2). 通过命名空间 & 辅助函数获取 

四. 访问模块中的 mutations

目标: 掌握模块中 mutation 的调用语法 

注意:默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

1. 调用子模块中 mutayion

        (1).  直接通过 store 调用 $store.commit('模块名/xxx'，额外参数)        

        (2). 通过 mapMutations 映射
                默认根级别的映射 mapMutations(['xxx'])

                子模块的映射 mapMutations('模块名',['xxx']) - 需要开启命名空间

export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions,
  getters
}

 2. 代码示例

        (1). 原生方法修改子模块的mutation

        (2). 通过命名空间 & 辅助函数获取 

五. 访问模块中的 action

目标: 掌握模块中action 的调用语法(同理- 直接类比 mutation 即可)

注意:默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块

1. 调用子模块中 action:

        (1). 直接通过 store 调用 $store.dispatch('模块名/xxx' , 额外参数)

        (2).  通过 mapActions 映射                

                默认根级别的映射 mapActions(['xxx'])

                子模块的映射 mapActions('模块名', ['xxx']) - 需要开启命名空间

export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions,
  getters
}

2. 代码示例 

        (1). 原生方法调用子模块的action

        (2). 通过命名空间 & 辅助函数获取