Vuejs с модулями с именами и неизвестным типом мутации - PullRequest
Новая
       48

Vuejs с модулями с именами и неизвестным типом мутации

0 голосов
/ 09 мая 2020

Я создал два модуля хранилища и выполнил импорт в основной магазин.

Когда я загружаю свой вид ящика, я получаю следующую ошибку. Что я здесь делаю не так 

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

// 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);
    },
  },
};

// аутентификация 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);
      });
    },
};

1 Ответ

0 голосов
/ 09 мая 2020
  1. Вам нужно удалить префиксы с sla sh из имен мутаций, потому что ваши модули имеют пространство имен, и вы всегда будете получать доступ к этим мутациям за пределами, указав имя модуля, подобное этому 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 находится внутри модуля navspaces, вы должны вызвать ее, указав имя модуля: 
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);
      });
    },
...