vuex模块化中的命名空间

一.注意事项

默认情况下，子模块内部的 action、mutation 和 getter 是注册在全局命名空间的——可以直接通过全局的方式调用，如下是可以不带模块名直接调用方法修改的

  modules: {
    user: {
      state: {
        token: '12345'
      },
      mutations: {
        updateToken (state) {
          state.token = '678910'
        }
      }
    },
  }

<button @click="updateToken">点击修改user中的token</button>

import { mapMutations} from "vuex";
 methods:{
 ...mapMutations(["updateToken"]),
}

二.采用namespaced保证内部模块的高封闭性
总结：namespaced:true

  modules: {
    user: {
      namespaced:true,
      state: {
        token: '12345'
      },
      mutations: {
        updateToken (state) {
          state.token = '678910'
        }
      }
    },
  }

三.调用命名空间的方法

方法1：直接调用-带上模块的属性名路径
总结：this.$store.commit("模块名/mutations中的方法名")

<button @click="testFn">原始方式调用mutations方法-修改token</button>

methods:{
testFn(){
      this.$store.commit("user/updateToken")
    },
}

 

方法2：辅助函数-带上模块的属性名路径
总结：...mapMutations(['模块名/mutations中的方法名'])

<button @click="testFn1">mapMutations方法-修改user中的token</button>

import {mapMutations} from "vuex";
methods: {
       ...mapMutations(['user/updateToken']),
       testFn1 () {
           this['user/updateToken']()
       }
   }

 

方法3：createNamespacedHelpers 创建基于某个命名空间辅助函数
总结：
步骤1.import { createNamespacedHelpers} from "vuex";
步骤2.const { mapMutations } = createNamespacedHelpers('子模块名')
步骤3.methods:{
...mapMutations(["子模块中mutations里的方法"])
}

<button @click="updateToken">createNamespacedHelpers方法-修改user中的token</button>

import { createNamespacedHelpers} from "vuex";
const { mapMutations } = createNamespacedHelpers('user')//user为子模块名
methods:{
...mapMutations(["updateToken"]),//updateToken为子模块中mutations里的方法
}