前言：

如果不设置命名空间，Vuex中的子模块可以直接通过全局的方式调用，这样失去了模块化的意义。
要想保证Vuex中内部模块的高封闭性，可以采用namespaced来进行设置

 modules: {
    // user模块
    user: {
      namespaced: true,
      state: {
        token: 'token'
      },
      mutations: {
        UpdateToken (state) {
          state.token = 'NewToken'
        }
      }
    }
}

如何调用带命名空间的mutations?

方式1：直接调用-带上模块的属性名路径

test () {
   this.$store.dispatch('user/UpdateToken') // 直接调用方法
}

方式2：辅助函数-带上模块的属性名路径

 methods: {
       ...mapMutations(['user/UpdateToken']),
       test () {
           this['user/UpdateToken']()
       }
   }
  <button @click="test">修改token</button>

方式3; createNamespacedHelpers 创建基于某个命名空间辅助函数

import { mapGetters, createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
<button @click="updateToken">修改token2</button>

0 条评论