[JavaScript知识库]《图解Vue3.0》- vuex - 第16节 Vuex 核心概念

核心概念

• state（mapState）
• getter
• mutaion
• action
• module

前面四个核心概念，看个小示例就对其功能一目了然了：
main.js

app.vue

vuex的使用还是很友好的，在store里面进行定义state、mutations，actions，getters，然后在组件中进行读取state的值（state，getters，mapState）。需要触发state变化时，可以使用commit mutation进行修改，如果需要异步，也可以使用dispatch action进行修改。自然这里写在了一个文件里面，一个应用的store都放置在一个文件里处理，与组件相隔太远，还是不利于对程序的理解的。所以vuex还提供了一个module的方式，可以将store分割成多个module处理，然后最终合并成一个store。每个module都有自己的state,actions,mutations等。

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

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

示例

main.js

app.vue