06-Vuex基础--namespaced命名空间

最新推荐文章于 2023-12-21 10:50:55 发布

Hello^_^Monkey

最新推荐文章于 2023-12-21 10:50:55 发布

阅读量531

点赞数 1

分类专栏： vuex 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_48010432/article/details/122514721

版权

vuex 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言：

如果不设置命名空间，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>