Vuex的store中的Module用法及说明

//模块A
const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

//模块B
const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
  //modules: {//模块中允许进行模块的镶嵌，但现实中很少用到}
}

const store = new Vuex.Store({
    //通过modules指定模块
  modules: {
    a: moduleA,
    b: moduleB
  }
})

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

const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态（也就是moduleA的state）
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
        // 这里的 `state` 对象是模块的局部状态（也就是moduleA的state）
      return state.count * 2
    }
  }
}

const store = new Vuex.Store({
  state: {
    rootcount: 0
  },
  mutations: {
    decrement (state) {
      // 这里的 `state` 对象是模块的局部状态（也就是moduleA的state）
      state.count--
    }
  },
  modules: {
    a: moduleA
  }
})

//-------------在其他组件中使用模块中的state需要指明模块
store.state   // -> moduleA 的状态
store.state.rootcount // -> store中的rootcount
store.state.a // -> moduleA 的状态
store.state.a.count  //moduleA中的count

//-------------其他组件中commit mutations时无需指定模块
this.$store.commit('increment')
this.$store.commit('decrement')
//-------------其他组件中使用模块中getters的时也是无需指定模块的
$store.getters.doubleCount

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

const moduleA = {
  // ...
  actions: {
      //这里使用{ state, commit, rootState }来接收context中的三个对象
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

//-------------其他组件中dispatch到modular中的actions
this.$store.dispatch

//-------------其他组件中commit mutations时无需指定模块
this.$store.commit('increment')
this.$store.commit('decrement')

//-------------其他组件中使用模块中getters的时也是无需指定模块的
$store.getters.doubleCount

//-------------其他组件中dispatch到modular中的actions
this.$store.dispatch

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模块
      modules: {
        // 继承父模块的命名空间
        myPage: {
          state: () => ({ ... }),
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 进一步嵌套命名空间
        posts: {
          namespaced: true,

          state: () => ({ ... }),
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

commit('xxx')       //没多级路径的，是访问全局命名空间，也就是store中的
getters['account/isAdmin']    //访问命名空间account下
dispatch('account/login')
commit('account/login')
getters['account/profile']
getters['account/posts/popular']      //访问命名空间account/posts