具有命名空间模块和未知突变类型的 Vue Js答案

【问题标题】：Vuejs with namespaced modules and unknow mutation type具有命名空间模块和未知突变类型的 Vue Js
【发布时间】：2020-05-08 22:02:58
【问题描述】：

我创建了两个商店模块，并导入了主商店。

当我加载抽屉视图时，我收到下一个错误。我在这里做错了什么

error:vuex.esm.js [vuex] unknown mutation type: SET_DRAWER

//抽屉.vue

.........
computed: {
    ...mapState("navstore", ["barColor", "barImage"]),
    drawer: {
      get() {
        return this.$store.state.navstore.drawer;
      },
      set(val) {
        this.$store.commit("SET_DRAWER", val);
      },
    },
    computedItems() {
      return null;
      //this.items.map(this.mapItem);
    },
    profile() {
      return {
        avatar: true,
        title: "Gestan",
      };
    },
  },

  methods: {},
.........
.........

//store/index.js

import Vue from "vue";
import Vuex from "vuex";
import { default as auth } from ".auth";
import { default as navstore } from "./navStore";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: { auth: auth, navstore: navstore },
});

//navstore.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const SET_BAR_IMAGE = "NAVSTORE/SET_BAR_IMAGE";
const SET_DRAWER = "NAVSTORE/SET_DRAWER";

export default {
  namespaced: true,
  state: {
    barColor: "rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)",
    barImage:
      "https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg",
    drawer: null,
  },
  mutations: {
    [SET_BAR_IMAGE](state, payload) {
      state.barImage = payload;
    },
    [SET_DRAWER](state, payload) {
      state.drawer = payload;
    },
  },
  actions: {
    actionSetDrawer({ commit }, payload) {
      commit(SET_DRAWER, payload);
    },
  },
};

//auth.js

import Vue from "vue";
import Vuex from "vuex";
import * as storage from "@/store/storage";
import services from "@/services/api/AuthenticationService";

Vue.use(Vuex);

const SET_USER = "AUTH/SET_USER";
const SET_TOKEN = "AUTH/SET_TOKEN";

export default {
  namespaced: true,
  state: {
    token: null,
    user: null,
    isUserLoggedIn: false,
  },
  mutations: {
    [SET_TOKEN](state, token) {
      state.token = token;
      state.isUserLoggedIn = !!token;
    },
    [SET_USER](state, user) {
      state.user = user;
    },
  },
  getters: {
    isAuthenticated: (state) => !!state.token,
    // authStatus: state => state.status
  },
  actions: {
    actionDoLogin({ dispatch }, payload) {
      return services.login(payload).then((res) => {
        dispatch("actionSetUser", res.data.user);
        dispatch("actionSetToken", res.data.token);
      });
    },
};

【问题讨论】：

标签： vue.js vuex-modules

【解决方案1】：

您需要从突变名称中删除带有斜杠的前缀，因为您的模块是命名空间的，并且您将始终在指示像这样的模块名称之外访问此突变 moduleName/mutation。

例如：

const SET_BAR_IMAGE = "NAVSTORE/SET_BAR_IMAGE";
const SET_DRAWER = "NAVSTORE/SET_DRAWER";
// should be
const SET_BAR_IMAGE = "SET_BAR_IMAGE";
const SET_DRAWER = "SET_DRAWER";

因为 SET_DRAWER 突变位于导航空间模块内，您应该将其命名为模块名称：

this.$store.commit("navstore/SET_DRAWER", val);

不要尝试在这样的操作中调用操作：

 actionDoLogin({ dispatch }, payload) {
      return services.login(payload).then((res) => {
        dispatch("actionSetUser", res.data.user);
        dispatch("actionSetToken", res.data.token);
      });
    },

以所需的组合使用突变：

 actionDoLogin({ dispatch }, payload) {
      return services.login(payload).then((res) => {
        commit(SET_USER, res.data.user);
        commit(SET_TOKEN, res.data.token);
      });
    },

【讨论】：