1

Я разбил свой vuex на несколько модулей, и теперь у меня перестали вызываться мутации из дочерних модулей(unknown mutation type: ***). Подскажите, что нужно сделать что бы исправить это?

Сам store

import Vue from "vue";
import Vuex from "vuex";
import ModalWindow from "./ModalWindow/mutations";
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        name: "",
        title: "",
        task: "",
        modalClosed: false,
        showModalWindow: false,
    },
    modules: {
        ModalWindow
    }
});
export default store;

Модуль ModalWindow

const ModalWindow = {
    mutations: {
        expandView(state, payload) {
            state.itemToExpand = payload.item;
            state.expandedCategory = payload.category;
            state.showModalWindow = true;
        },
        closeModal(state) {
            state.showModalWindow = false;
        },
    openModal(state, modalState) {
        state.modalClosed = modalState;
    }
}};
export default ModalWindow;

Импортирую store в main.js

import store from './Store/index'
/////////////////////////////////
new Vue({
    store,
    render: h => h(App)
}).$mount("#app");

Вызываю мутацию из ModalWindow

<button @click="$store.commit('openModal',true)"></button>

<button @click="$store.commit('ModalWindow/openModal',true)"> Тоже не работает

1 ответ 1

1

Мутации в дочерних модулях - звучит жестко )))

Варианта два плохой и не очень плохой )

  1. Сделать их глобальными привязав к Vue.mixin(MyGlobalMixin)
  2. this.$parent.$store.commit()

Я обычно использую второй вариант, ибо суперглобалный mixin это ну очень плохо!

2
  • Я уже понял,что из дочернего модуля менять значения родительского как-то неправильно. А если пойти немного другим путем, и нужные мне данные обьявлять в store дочернего модуля, и в нем же их менять, то как получить к ним доступ из компонентов? Пробовал так - return this.$store.state.ModalWindow.modalClosed , возвращает undefined. Я еще видел пример с передачей rootState, но я так и не понял как это сделать
    – Zoom
    20 фев 2020 в 20:55
  • Ты так скоро до globals дойдешь! )))) По хорошему это сделать event emiter - <MyModal v-on:shown="onModalShown" v-on:closed="onModalClosed" /> и после уже посылать сообщения из компонента через this.$emit('shown', arg1, arg2) и this.$emit('closed', arg1, arg2) и уже исходя из этих параметров менять состояние в $store. Пример как работают emiter'ы я какраз сегодня тут писал ru.stackoverflow.com/questions/1085335/… Тем что ты отделяешь компонент от globals, ты его как-бы делаешь более переиспользуемым и выкидываешь костыли.
    – Eugene X
    21 фев 2020 в 3:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.