Vuex之理解Modules

理解Modules

1.什么是module？

• 背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。

• module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

---

2.怎么用module？

• 一般结构

  const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
   }
  const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
   }
  
  const store = new Vuex.Store({
    modules: {
      a: moduleA,
      b: moduleB})

• 模块内部的数据：①内部state，模块内部的state是局部的，也就是模块私有的，比如是car.js模块state中的list数据，我们要通过this.$store.state.car.list获取；②内部getter、mutation和action，仍然注册在全局命名空间内，这是为了多模块可以同时响应同一mutation；this.$store.state.car.carGetter的结结果是undefined，而通过this.$store.state.carGetter则可以拿到。

• 传参：getters====({state(局部状态),getters（全局getters对象）,roosState（根状态）})；actions====({state(局部状态),commit,roosState（根状态）}).