Vuex中的模块化-Module

为什么会有模块化？

由于使用单一状态树，应用的所有状态都会集中在一个比较大的对象，当应用比较复杂时，store对象就会变得臃肿，因此，就有了Vuex模块化

模块化的简单应用

定义两个模块 user 和 setting
user中管理token
setting中管理应用名称name

const store = new Vuex.Store({
  modules: {
    user: {
      state: {
        token: '1212'
      }
    },
    setting: {
      state: {
        name: 'beizi'
      }
    }
  },

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

模块化的命名空间

刚才的user模块还是setting模块，它的 action、mutation 和 getter 其实并没有区分，都可以直接通过全局的方式调用 如
但是，如果我们想保证内部模块的高封闭性，我们可以采用namespaced来进行设置

• 高封闭性？

• 可以理解成 一家人如果分家了，此时，你的爸妈可以随意的进出分给你的小家，你觉得自己没什么隐私了，我们可以给自己的房门加一道锁（命名空间 namespaced）,你的父母再也不能进出你的小家了

  modules: {
    user: {
      // 命名空间
      namespaced: true,
      state: {
        token: '1212'
      },
      mutations: {
        // 这里的mutations 是user的
        upToken(state) {
          state.token = '666'
        }
      }
    },
    setting: {
      state: {
        name: 'beizi'
      }
    }

  },

使用 createNamespacedHelpers 创建基于命名空间的辅助函数

<template>
  <div>
    <div>token:---  {{ $store.state.user.token }}</div>
    <button @click="upToken"> 更改token</button>
    <div>name:---  {{ $store.state.setting.name }}</div>
    <div>1</div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
export default {
  methods: {
    ...mapMutations(['upToken'])
  }
}
</script>