Module

• 作用：把所有的状态分为模块管理，方便维护

1. 定义两个模块 user 和 setting
2. user中管理用户的状态 token
3. setting中管理 应用的名称 name

const store  = new Vuex.Store({
  modules: {
    user: {
       state: {
         token: '123456'
       }
    },
    setting: {
      state: {
         name: '森林'
      }
    }
  })

• 新建一个vue组件获取token和name

<template>
  <div>
      <div>token: {{ $store.state.user.token }}</div>
      <div>name: {{ $store.state.setting.name }}</div>
  </div>
</template>

• 通过$store.state.setting.name获取数据有点麻烦
• 可以使用getters处理一下数据

getters: {
   token: state => state.user.token,
   name: state => state.setting.name
 } 

• 这样就可以通过$store.getters.token来获取

注意：

这里的getters不是定义在module里面的，而是定义在根文件。

空间命名锁

• 给每一个模块添加空间命名锁-namespaced: true
• 防止模块中的命名的冲突

调用方式

• 直接调用：this.$store.dispatch('模块名/方法名')
• 辅助函数调用：...mapMutations('模块名', ['方法名']),