Vue lädt Vuex dynamisch

                                                       

vuex ist eine Hochleistungslösung für die Behandlung des Statusmanagements. Es erleichtert die Verwaltung großer Vue.js und macht den Zustand vorhersehbar, indem der Store verfügbar gemacht wird.

Wahrscheinlich kennen Sie Vuex bereits, wenn nicht, gibt uns Joshua Bemenderfer unten eine großartige Einführung.

Sie können das Vuex-Store-Modul wie folgt definieren:

const dogs = {
  state: {
    data: []
  },
  mutations: {
    addDog(state, dog) {
      state.data.push(dog)
    }
  }
}

const store = new Vuex.Store({
  modules: {
    dogs
  }
});

Normalerweise verfügt eine große Anwendung über viele Module. Alle Module werden in ihren eigenen Dateien definiert und beim Aufruf von new Vuex.Store gemeinsam übergeben. So gehen Sie normalerweise auch damit um.

Aber es kann einen Sonderfall geben, in dem Sie das Vuex-Modul dynamisch in Ihre Anwendung laden müssen, um es in den aktuellen Store zu erweitern.

Ein konkreteres Beispiel ist das Schreiben einer externen Komponentenbibliothek, die von Vuex abhängt.

Gleiches gilt für Anwendungen, die in mehrere interne Pakete aufgeteilt sind. Jedes Paket kann seine eigenen Komponenten und seinen eigenen Speicher haben.

Normalerweise handelt es sich hierbei um ein übliches wiederverwendbares Modul in einer Anwendung. Beispielsweise stellt ein notifications-Modul einige Benachrichtigungskomponenten bereit und ein store-Modul erweitert Ihren Anwendungsspeicher, sodass auf das Hinzufügen eines neuen Moduls von überall in Ihrer Anwendung zugegriffen werden kann.

Schauen wir uns an, wie es umgesetzt wird.

Module dynamisch zum Speicher hinzufügen

Da wir die allgemeinen Einstellungen von Vuex verwenden, erstellen wir als Nächstes einen notifications-Ordner, den Sie an einer beliebigen Stelle ablegen können. Stellen Sie sich das vor ist eine periphere Erweiterung.

Erstellen Sie in diesem Ordner eine neue state.js-Datei als unser Vuex-Modul:

export default {
  state: [],
  mutations: {
    addNotification(state, notification) {
      state.push(notification);
    }
  }
};

Erstellen Sie dann eine Notifications.vue-Datei und importieren Sie sie. Sie würden dann auf die Instanzvariable $store zugreifen, vorausgesetzt, dass ein Vuex-Speicher abgerufen werden muss, um den Status abzurufen, und ein addNotification senden:

<template>
  <p>
    <p v-for="notification in notifications">
      {{notification}}
    </p>
    <button @click="addHey">Add Hey!</button>
  </p>
</template>

<script>
import state from "./state";

export default {
  computed: {
    notifications() {
      return this.$store.state.notifications;
    }
  },
  methods: {
    addHey() {
      this.$store.commit("addNotification", "Hey!");
    }
  }
};
</script>

Die Idee ist nun, dass bei Verwendung der Komponente die Das Vuex-Modul fügt automatisch Benachrichtigungen hinzu. Wenn eine externe Anwendung die Komponente verwendet, wird sie auf diese Weise eingepackt und die Anwendung muss sich nicht darum kümmern, sie direkt hinzuzufügen, sodass wir den created-Hook verwenden können.

Und um Vuex-Module dynamisch hinzuzufügen, können wir das Instanzattribut $store.registerModule des Stores verwenden:

import state from "./state";

export default {
  // ...
  created() {
    this.$store.registerModule("notifications", state);
  }
};

Bei Verwendung der Notifications-Komponente wird das Modul jetzt automatisch registriert.

Fassen wir es zusammen

Vuex-Speicher in großen Anwendungen wird statisch durch verschiedene Module organisiert. Es sollte so sein. In ganz besonderen Fällen müssen Sie jedoch möglicherweise den Speicher erweitern und selbst ein Modul hinzufügen.

Empfohlenes Tutorial: „JS-Tutorial“

Das obige ist der detaillierte Inhalt vonVue lädt Vuex dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!