Ändern Sie einen anderen Modulstatus von einem Modul in Vuex

77

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?

Fizer Khan
quelle

Antworten:

133

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 })
Saurabh
quelle
10
Wenn Sie Module und Namespaces verwenden, vergessen Sie nicht, den Namespace zum commit, wie hinzuzufügen, da dies commit('namespace/TOGGLE_SAVING', null, { root: true })sonst nicht funktioniert.
Brainbag
1
Das funktioniert bei mir nicht. Ich bekomme nur 'unbekannten Mutationstyp'.
Geoidesic
Ich hatte ein ähnliches Bedürfnis und Ihre Antwort löste mein Problem. Vielen Dank.
Jedi
Danke vielmals! es hat mir geholfen
Valary o
2

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
    }
  }
}
Julien
quelle
So genau habe ich es gemacht. Ich habe in beiden Modulen auch "Namespace: true" festgelegt. Aber ich bekomme[vuex] unknown local mutation type: TOGGLE_LOADING, global type: posts/TOGGLE_LOADING
Fizer Khan
1
Oh ja. Standardmäßig sind Aktionen, Mutationen und Getter in Modulen weiterhin unter dem globalen Namespace registriert. Sie können also entweder die Namespace-Eigenschaft entfernen oder commit ('someMutation', null, {root: true}) verwenden
Julien
1
In meinem Fall, wenn ich benutze namespace: true, muss ich das nächste tun:commit('my_module_name/someMutation', null, { root: true })
TitanFighter
Ein Commit ist synchron, während eine Aktion asynchron ist. Daher sollten Sie keine Aktion zum Festschreiben einer Mutation verwenden.
Omarjebari
0

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))
  })
}
Igor Parra
quelle