So verwenden Sie Vuex in einem Vue-Projekt

Was ist Vuex?

TIPP 👉 Erklärung auf der offiziellen Website: Vuex ist ein Statusverwaltungsmodus, der speziell für Vue.js-Anwendungen entwickelt wurde. Es verwaltet den Status aller Komponenten einer Anwendung über einen zentralen Speicher und sorgt durch entsprechende Regeln für vorhersehbare Statusänderungen.

Vuex kann verwendet werden, wenn mehrere Seiten Daten gemeinsam nutzen müssen. Zum Beispiel:

• Modul zur Verwaltung der persönlichen Informationen des Benutzers;
• Gehen Sie auf der Bestellabschlussseite zur Gutscheinauswahlseite und wählen Sie die Gutscheinseite aus. Wie speichere ich ausgewählte Couponinformationen? Der Staat speichert die Couponinformationen. Wenn ein Coupon ausgewählt wird, werden Mutationen übermittelt. Auf der Seite zur Auftragsabwicklung wird der ausgewählte Coupon abgerufen und die Informationen zum Bestellrabatt werden aktualisiert.
• Das Warenkorbmodul ruft die Schnittstelle jedes Mal auf, um die Anzahl der Einkaufswagen abzurufen. Der Effekt wird erreicht, aber jede HTTP-Anforderung beansprucht die Browserleistung.
• In meinem Bestellmodul klickt die Bestellliste auch, um die Bestellung zu stornieren, und aktualisiert dann die entsprechende Bestellliste. In diesem Fall wird Vuex auch verwendet, um einen Status zu speichern, diesen Status zu überwachen und die entsprechende Liste zu aktualisieren, wenn er sich ändert.

Die Grundidee hinter Vuex ist von Flux und Redux übernommen. Im Gegensatz zu anderen Modi ist Vuex eine speziell für Vue entwickelte Statusverwaltungsbibliothek, um den feinkörnigen Datenantwortmechanismus von Vue.js für effiziente Statusaktualisierungen zu nutzen.

Vuex-Nutzungszyklusdiagramm

Mein Filialverzeichnis

• Module dienen zur Speicherung verschiedener Module
• action-types.js dient zur einfachen Verwaltung, String-Mapping und standardisierten Verwaltung
• mutation-types.js dient auch der einfachen Verwaltung. Stellen Sie sich nur vor, wie schlimm es wäre, wenn eine Reihe von Funktionsmodulen zusammengemischt würden.
• index.js

Implementieren eines Vuex-Beispiels

Lassen Sie uns diese Dateien erstellen

Aktionstypen.js

// Benutzerinformationen abrufen export const QUERY_USER_INFO = "QUERY_USER_INFO"

mutation-types.js

// Benutzerinformationen festlegen exportieren const SET_USER_INFO = 'SET_USER_INFO'

Erstellen Sie eine base.js-Datei unter Modulen

base.js

importiere { QUERY_USER_INFO } aus '../action-types'
importiere { SET_USER_INFO, SET_CUR_MENU_ID } aus '../mutation-types'
API aus „@/assets/js/api.js“ importieren

// Status erstellen
konstanter Zustand = {
    // Benutzerinformationen userInfo: {},
}

// Daten asynchron abrufen, Mutationen durchführen, Mutationen ändern den Status
const Aktionen = {
    /* Benutzerinformationen abrufen */
    [QUERY_USER_INFO] ({ commit }, Parameter) {
        return api.get({
                URL: "/system/getUser",
            }, params.vm).then(data => {
                commit(SET_USER_INFO, Daten)
                Rückgabedaten
        })

    }

}

const getter = {
    // Aktuelle Benutzerinformationen userInfo: state => state.userInfo
}

// Synchron abrufen const mutations = {
    [SET_USER_INFO] (Status, Daten) {
        status.userInfo = Daten
    }
}


Standard exportieren {
    Zustand,
    Aktionen,
    Getter,
    Mutationen
}

index.js

Vue von „vue“ importieren
Vuex von „vuex“ importieren
importiere Basis aus "./modules/base.js"

Vue.use(Vuex);

exportiere standardmäßig neuen Vuex.Store({
    Module:
        Base
    }
})

Header.vue

<span>{{$store.getters.userInfo.name}}</span>

Haupt-JS

Vue von „vue“ importieren
Store aus „./store“ importieren
importiere { QUERY_USER_INFO } aus '@/store/action-types.js'

store.dispatch(QUERY_USER_INFO, {}).finally(() => {
    neuer Vue({
        Router: Router (Speicher),
        speichern,
        rendern: h => h(App)
    }).$mount('#app')
})

Zusammenfassen

Dies ist das Ende dieses Artikels zur Verwendung von Vuex in Vue-Projekten. Weitere relevante Inhalte zur Verwendung von Vuex in Vue-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!