Ändern Sie einen anderen Modulstatus von einem Modul in Vuex

Ich habe zwei Module in meinem Vuex-Shop.

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

Im Modul habe loadingich eine Eigenschaft, savingdie entweder trueoder festgelegt werden kann, falseund eine Mutationsfunktion, die TOGGLE_SAVINGzum Festlegen dieser Eigenschaft benannt ist.

Im Modul postsmöchte ich vor und nach dem Abrufen von Posts die Eigenschaft ändern saving. Ich mache es, indem ich commit('TOGGLE_SAVING')von einer der Aktionen im postsModul aus aufrufe.

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

Beim Versuch, ein Commit durchzuführen, wurde in der Konsole der folgende Fehler angezeigt

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

Wie kann ich den Status in einem anderen Modul mithilfe von ändern commit?

Versuchen Sie es mit den folgenden Parametern, wie hier vorgeschlagen ;

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

Wenn Sie namespacedtrue festgelegt haben (in Nuxt ist dies im Modulmodus die Standardeinstellung), wird dies wie folgt:

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

Mit der Aktion können Sie eine Mutation festschreiben, die in einem anderen Modul definiert wurde. Anschließend ändern Sie den Status in einem anderen Modul.

so was:

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

Sie können den Speicher auch wie gewohnt in eine beliebige js-Datei importieren und verwenden. Zum Beispiel:

// src/state/modules/posts.js

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

Dies funktioniert ziemlich gut. Der einzige Nachteil ist, dass es schwierig sein kann, Tests oder Modelle zu isolieren.

Ausgabe : Vor kurzem habe ich den gesamten Code mit der Technik entfernt, die ich aufgrund der Testprobleme erwähnt habe. In der Tat können Sie den Status anderer Module wie in diesem Beispiel immer auf die empfohlene Weise ändern. Sehr nützlich, wenn Sie Authentifizierung und Profil in verschiedenen Modulen verwalten.

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))
  })
}