Vuex 模块化

模块化的简单应用

定义两个模块 user 和 setting

user中管理用户的状态 token

setting中管理 应用的名称 name

export default new Vuex.Store({
  modules: {
    user: {
      state: {
        token: '12345'
      }
    },
    setting: {
      state: {
        name: 'ww'
      }
    }
  }
})

定义一个child-w组件 , 分别显示用户的 token 和 应用名称name

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

注意: 此时要获取子模块的状态 需要通过 $store.state.模块名称.属性名 来获取

 

模块化中的命名空间

默认情况下 模块内部的action , mutation 和 getter 是注册在全局命名空间的------这样使得多个模块能够对同一 mutation 或 action 做出响应

例如在子模块中添加方法修改state.token的值 那么也可以用this.$store.commit('方法')使用

但是 , 如果我们想要保证内部模块的高封闭性 , 我们可以采用namespaced来进行设置 可以理解为(给自己房间上一把锁 钥 匙在你手上 只有你可以通过这个钥匙(命名空间)进入房间获取其中数据)

    user: {
      //  值为true表示命名
      namespaced: true,
      state: {
        token: '12345'
      },
      mutations: {
        updateToken (state) {
          state.token = xxx
        }
      }
    }

方案一: 采用路径形式调用

  methods: {
    ...mapMutations(['user/updateToken']),
    updateToken () {
      // 采用路径模式
      this.$store.commit('user/updateToken')
    }
  },

方案二 辅助函数-带上模块的属性名路径

    <button @click="test"></button>

    test () {
    ...mapMutations(['user/updateToken']),
      this['user/updateToken']()
    }

方案三 createNamespacedHelpers 创建基于某个命名空间辅助函数

    <button @click="updateToken"></button>

import { mapGetters, createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')

  methods: {
    ...mapMutations(['updateToken'])
  },