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 you have read our privacy policy.

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