Змініть інший стан модуля з одного модуля у Vuex

У моєму магазині vuex є два модулі.

var store = new Vuex.Store({
    modules: {
        loading: loading 
        posts: posts
    }
});

У модулі у loadingмене є властивість, savingяку можна встановити trueабо, falseа також мати функцію мутації, названу TOGGLE_SAVINGдля встановлення цієї властивості.

У модулі posts, до і після отримання повідомлень, я хочу змінити властивість saving. Я роблю це за допомогою дзвінка commit('TOGGLE_SAVING')з однієї з дій у postsмодулі.

var getPosts = function (context) {
    contex.commit(TOGGLE_LOADING);
};

Коли він намагався зафіксувати, я отримав наступну помилку в консолі

[vuex] unknown local mutation type: TOGGLE_LOADING, global type: posts/TOGGLE_LOADING 

Як я можу змінити стан в іншому модулі за допомогою commit?

Спробуйте з наступними параметрами, як запропоновано тут ;

commit('TOGGLE_LOADING', null, { root: true })

Якщо ви namespacedвстановили значення true (у Nuxt це за замовчуванням у режимі модулів), це стає:

commit('loading/TOGGLE_LOADING', null, { root: true })

Ви можете використовувати дію для здійснення мутації, яка визначена в іншому модулі, тоді ви зміните стан в іншому модулі.

подобається це:

posts: {
  actions: {
    toggleSavingActions(context) {
      // some actions 
      context.commit("TOGGLE_SAVING"); // defined in loading module
    }
  }
}

Ви також можете імпортувати магазин, як зазвичай це робить у будь-якому js-файлі, і використовувати його. Наприклад:

// src/state/modules/posts.js

import store from '@/state/store'
...
store.commit('posts/TOGGLE_LOADING')
...

Це працює досить добре, єдиним недоліком є ​​те, що може важко ізолювати тести чи макет.

Видання : Нещодавно я усунув увесь код, використовуючи техніку, яку я згадую через проблеми з тестуванням. Дійсно, ви завжди можете змінити стан інших модулів, дотримуючись рекомендованого способу, як у цьому прикладі. Дуже корисно, якщо ви керуєте авторизацією та профілем у різних модулях.

logout: context => {
  return new Promise((resolve) => {
    // Clear token in all axios requests
    axios.defaults.headers.common['Authorization'] = ''
    // Logout from firebase
    firebase
      .auth()
      .signOut()
      .then(() => {
        // Update state in profile module
        context.commit('profile/SET_USER', null, {
          root: true
        })
        resolve()
      })
      .catch(error => reject(error))
  })
}