Ich versuche, mein Vuex-Modul in Blöcke aufzuteilen. Zusätzlich zum Erstellen mehrerer Module mit Namespace (namespaced: true) möchte ich das globale Modul erweitern, das extrem lang wurde. In einigen Fällen scheint es bevorzugt zu sein, einige meiner Aktionen / Mutationen im globalen Modul zu belassen, da sie miteinander kommunizieren und zu gekoppelt sind, aber jedes Mal, wenn ich eine Aktion ausführen muss, die Option { root: true } verwenden oder Mutation fühlt sich meiner Meinung nach nicht gut genug an. In meinem Fall klingt es also nach der perfekten Lösung, namespaced nicht auf true zu setzen.

Aber...

Zuallererst - es scheint, dass Module ohne Namensraum nicht ihre eigenen state halten können. Außerdem - wenn sie versuchen, state zu verwenden, das an die Aktionen / Mutationen geliefert wurde, schlagen sie fehl, da sie nicht direkt mit dem Stammstatus kommunizieren können (nur mit rootState param, was nicht das ist, was ich erwartet hatte). .

Eine weitere mögliche Lösung, die ich mir vorstellen könnte, besteht darin, meinen Vuex-Shop wie folgt zu starten:

export default new Vuex.Store({
  namespaced: true,
  state: {},
  getters: {},
  mutations: {},
  actions: {
    ...actionsFromFile1,
    ...actionsFromFile2
  }
});

Aber diese Lösung scheint noch nicht die beste zu sein. Gibt es eine andere Lösung, die mir fehlt?

0
Shay Yzhakov 12 Aug. 2020 im 16:52

2 Antworten

Beste Antwort

Sie sollten Ihre Aktionen und Mutationen in Ihren Modulen behalten.

Wie bereits erwähnt, können Sie mit root Aktionen anderer Module auslösen. Warum Sie dies verwenden sollten, ist einfach. Sichtbarkeit - Wenn Sie eine Aktion aus einem anderen Geschäft versenden müssen, behalten Sie sie in dem Modul, in dem Sie sie erwarten. Wenn Sie Code in Ihr globales Geschäft und Ihre Module aufteilen, ist es schwierig zu verfolgen, woher die Dinge kommen.

Auch Ihr globales Geschäft wird wachsen und es wird Ihnen schwer fallen, später zu finden, was Sie wollen.

Einfaches Beispiel:

// message.js

const actions = {
  add({ dispatch }, message) {
    dispatch("chat/initializeChat", {}, { root: true });

    // add message or something
  },
};
0
Mirko t. 12 Aug. 2020 im 14:29

Sie müssen Dateien importieren, die importiert werden sollen. Deklarieren Sie diese Dateien in das Modulobjekt der Hauptspeicherdatei als

//getters,actions and mutaions for main store
import getters from "./getters";
import mutations from "./mutations";
import actions from "./actions";
import module1 from "./modules/module1";
import module2 from "./modules/module2";

const myDefaultStore = () => {
  return new Vuex.Store({
    modules: {
      module1,
      module2
    },
    state,
    actions,
    mutations,
    getters,
  });
};

export default myDefaultStore;

Und auch in anderen Speicherdateien, d. h. module1 / index.js, müssen Sie make namespace: true wie folgt deklarieren

    //getters,actions and mutaions for modules
    import getters from "./getters";
    import mutations from "./mutations";
    import actions from "./actions";
    export default {
     namespaced: true,
     state,
     actions,
     mutations,
     getters,
   };
0
Atif Zia 12 Aug. 2020 im 14:42