Vuex 中 modules 的大总结 你都会了吗?

// 为什么要使用 modules 来分子模块?

// 如果不分子模块, 后期业务量大了之后, 所有的数据都要放到全局 state 中存储, 所有的 state 都有配套的 mutations / actions / getters, 维护起来难度太大

// 划分子模块后, 每个模块都可以把自己的数据放到其中, 配套的 mutations 等都可以独立在自己模块内, 方便后期维护

// 在中大型项目中一定会分子模块!

// 如何划分子模块?

// 1. 定义子模块 -> 创建一个对象, 对象中有四个核心成员(state, mutations, actions, getters)

// 2. 注册子模块 -> 在全局的 modules 节点下配置, 模块名: 子模块对象

// 刚分好的子模块, 定义的 mutations 和 actions 访问方式和全局一样, 为了避免子模块之间命名重复导致的调用混乱, 强烈建议开启「命名空间」

// 开启命名空间:

// 在子模块中 namespaced: true

// 开启命名空间后, 无法直接调用子模块内的成员, 故出现了多种访问方式:

// 直接访问

// 注意事项: 开启命名空间后, 无法直接访问 getters 的内容

// state: $store.state.子模块名称.子模块数据项

// mutations: $store.commit('子模块名称/子模块 mutations 函数名')

// actions: $store.dispatch('子模块名称/子模块 actions 函数名')

// 辅助函数访问

// 共性规律, 使用步骤:

// 1. 按需导入辅助函数(mapState mapMutations