So verwenden Sie Vuex zum Verwalten globaler Daten und Status in Vue

Vue.js ist ein beliebtes Front-End-Framework, das äußerst wartbare und wiederverwendbare Benutzeroberflächen erstellen kann. Einer der Hauptvorteile besteht darin, dass es sehr einfach zu erlernen und zu verwenden ist und nahtlos mit anderen Bibliotheken und Frameworks zusammenarbeitet. Wenn Ihre Anwendung jedoch immer komplexer wird, kann es sein, dass Sie auf ein Problem stoßen: Wie verwaltet man den globalen Status und die globalen Daten? Dies ist das Problem, das Vuex löst.

Vuex ist eine Zustandsverwaltungsbibliothek, die speziell für Vue.js entwickelt wurde. Sein Hauptzweck besteht darin, die Aufrechterhaltung des Staates leichter handhabbar zu machen. Vuex stellt eine einzige „Datenquelle“ dar und verwaltet diese auf vorhersehbare Weise.

In diesem Artikel stellen wir die Grundlagen von Vuex vor und zeigen, wie man es in Vue.js verwendet, um den globalen Status und die Daten zu verwalten.

Grundlagen von Vuex

Bevor wir in Vuex eintauchen, müssen wir ein grundlegendes Verständnis seiner Kernkonzepte haben.

State

State ist ein Objekt, das den Anwendungsstatus speichert. In Vuex ist der Status reaktiv, was bedeutet, dass alle Komponenten, die diesen Status verwenden, automatisch aktualisiert werden, wenn sich ein Status ändert. Normalerweise sollten Sie den Status mit einem leeren Objekt initialisieren.

const store = new Vuex.Store({
    state: {
        count: 0
    }
})

Getter

Getter ist eine Funktion zum Abrufen von Daten aus dem Bundesstaat. Getter kann verwendet werden, wenn wir den Status berechnen oder filtern müssen. Der Getter akzeptiert state als erstes Argument. Getter können berechnete Eigenschaften oder Funktionen sein.

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false }
        ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        todoById: (state) => (id) => {
            return state.todos.find(todo => todo.id === id)
        }
    }
})

Mutation

Mutation wird verwendet, um den Zustand zu ändern. Wenn Sie den Status ändern, müssen Sie Mutation verwenden, anstatt den Status direkt zu ändern. Diese Konvention ermöglicht es uns, jede Zustandsänderung zu verfolgen und Fehler zu beheben oder zurückzuverfolgen, wenn diese Änderungen auftreten. Die Mutation muss synchron sein.

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})

Action

Action wird verwendet, um asynchrone Aufgaben auszuführen und Mutationen einzureichen. Aktionen enthalten häufig asynchrone Logik, beispielsweise API-Aufrufe. Wenn eine Aktion aufgerufen wird, führt sie Mutationen aus, anstatt den Status direkt zu ändern.

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    },
    actions: {
        incrementAsync ({ commit }) {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    }
})

Module

Vuex-Anwendungen haben normalerweise einen großen Zustandsbaum. Um den Zustandsbaum wartbar zu machen, kann er in mehrere separate Module aufgeteilt werden. Mithilfe von Modulen können wir unseren Code einfach organisieren und den Status isolieren.

const counterModule = {
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    },
    actions: {
        incrementAsync ({ commit }) {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    }
}

const store = new Vuex.Store({
    modules: {
        counter: counterModule
    }
})

Globalen Status mit Vuex verwalten

Da wir nun die Grundlagen von Vuex verstanden haben, sehen wir uns an, wie man es in einer Vue.js-Anwendung verwendet.

Installieren Sie Vuex

Um Vuex zu verwenden, installieren Sie es zunächst in Ihrem Projekt. Es kann mit npm installiert werden:

npm install vuex --save

Nach der Installation müssen Sie es in Vue.js konfigurieren, indem Sie die Vue.use()-Methode aufrufen:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Define State

Lassen Sie uns zur Demonstration eine sehr einfache Todo-List-Anwendung erstellen wie man Vuex mit Vue.js verwendet.

Zuerst müssen wir einen Anfangszustand definieren. In diesem Fall definieren wir eine Reihe von Aufgaben:

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    }
})

Status abrufen

Da wir nun unseren Status definiert haben, wollen wir sehen, wie wir den Status mithilfe von Getter abrufen.

Getter ermöglicht es uns, Daten vom Staat abzurufen und Berechnungen durchzuführen. In unserer Todo-List-Anwendung können wir Getter verwenden, um einen bestimmten Status oder abgeschlossene und unvollendete Todos abzurufen.

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    }
})

Status ändern

Wenn Sie den Status ändern möchten, müssen Sie Mutation verwenden. Abhängig von unserer Anwendung können wir zwei Mutationen definieren: Todo hinzufügen und Abschlussstatus umschalten.

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    }
})

Aktionen ausführen

In unserer Todo-Listenanwendung müssen wir möglicherweise einige asynchrone Vorgänge ausführen. Wenn Sie beispielsweise Aufgaben vom Server abrufen möchten, müssen Sie eine asynchrone Aktion verwenden.

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    },
    actions: {
        loadTodos: ({ commit }) => {
            api.getTodos(todos => {
                todos.forEach(todo => {
                    commit('addTodo', todo)
                })
            })
        }
    }
})

Module verwenden

Da Ihr Vuex-Status komplexer wird, müssen Sie ihn möglicherweise in mehrere Module aufteilen.

In unserer Anwendung können wir den Anwendungsstatus der Todo-Liste in zwei Module aufteilen: Todo und Benutzer. Das Todo-Modul enthält Todo-Listendaten und zugehörige Vorgänge. Das Benutzermodul enthält Benutzerinformationen.

const todoModule = {
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    },
    actions: {
        loadTodos: ({ commit }) => {
            api.getTodos(todos => {
                todos.forEach(todo => {
                    commit('addTodo', todo)
                })
            })
        }
    }
}

const userModule = {
    state: {
        user: null
    },
    mutations: {
        setUser: (state, user) => {
            state.user = user
        },
        clearUser: (state) => {
            state.user = null
        }
    },
    actions: {
        login: ({ commit }, user) => {
            api.login(user, () => {
                commit('setUser', user)
            })
        },
        logout: ({ commit }) => {
            api.logout(() => {
                commit('clearUser')
            })
        }
    }
}

const store = new Vuex.Store({
    modules: {
        todo: todoModule,
        user: userModule
    }
})

Zusammenfassung

Vuex ist eine sehr leistungsstarke Zustandsverwaltungsbibliothek, die uns dabei hilft, den Zustand und die Daten von Vue.js-Anwendungen elegant zu verwalten. Durch die Verwendung von Vuex können wir problemlos auf den globalen Status zugreifen und ihn ändern, ohne Daten manuell zwischen Komponenten übergeben zu müssen. Denken Sie daran, dass die beste Vorgehensweise darin besteht, Vuex bei Bedarf nach Bedarf zu verwenden. Bei einfachen Anwendungen reicht es möglicherweise aus, nur den lokalen Komponentenstatus zu verwenden, um Ihre Anforderungen vollständig zu erfüllen. Wenn Ihre Anwendung jedoch immer komplexer wird, können Sie Vuex zur Statusverwaltung verwenden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vuex zum Verwalten globaler Daten und Status in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!