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（根状态）}).