Пространства имен в модуляризации vuex

1. Меры предосторожности

По умолчанию действия, мутации и геттеры внутри подмодуля регистрируются в глобальном пространстве имен — их можно вызывать напрямую через глобальный метод. Следующий метод можно изменить напрямую, вызвав метод без имени модуля.

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

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

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

2. Используйте пространство имен для обеспечения высокой герметичности внутренних модулей.
Краткое описание: пространство имен: true

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

3. Как вызвать пространство имен

Метод 1: Прямой вызов — введите сводную информацию о пути имени атрибута модуля
: this.$store.commit("Имя модуля/имя метода в мутациях")

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

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

 

Способ 2: Вспомогательная функция — сводка пути имени атрибута с модулем
:...mapMutations(['Имя модуля/имя метода в мутациях'])

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

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

 

Метод 3: createNamespacedHelpers Создайте сводку вспомогательной функции
на основе определенного пространства имен:
Шаг 1.import { createNamespacedHelpers} из "vuex";
Шаг 2.const { mapMutations } = createNamespacedHelpers('имя подмодуля')
Шаг 3.methods:{ .. .mapMutations(["Методы мутаций в подмодулях"]) }

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

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