Erklären Sie im Detail, wie Sie Vuex verwenden, und Sie können es verstehen, nachdem Sie es gelesen haben

Vuex ist der Statusmanager von vue.js, der den Datenaustausch jeder Seite realisiert und in 5 Teile unterteilt ist:

• Status: Datenstatus speichern

• Getter: Staatserwerb

• Mutationen: lösen synchrone Ereignisse aus

• Aktionen: Mutation einreichen, asynchroner Vorgang

• Module: Vuex-Modul

Die Verwendungsmethode ist wie folgt:

Erstellen Sie eine neue Vuex-Store-Instanz in store/index.js und registrieren Sie die Hauptmodule

//index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import state from './state'
import getters from './getters'
import actions from './actons'
import mutations from './mutations'

const store = new Vuex.Store({state,getters,actions,mutations})
export default store

Importieren und verwenden Sie die Store-Instanz in main.js

//main.js

import store from './store'
new Vue({
    el: '#app',
    router,
    store
})

Die folgenden Untermodulbeispiele

Inhaltsverzeichnis

Definieren Sie einen Namen in state.js

Rufen Sie den Wert im Status in getters.js ab

Arbeiten mit Daten in mutations.js

Bearbeiten Sie Daten in actions.js asynchron

---

Definieren Sie einen Namen in state.js

//state.js
export default {
    name: ''
}



//page.vue
computed:{
    name(){
        return this.$store.state.name;
    }
}

Diese Methode zum Abrufen des Status wird nicht empfohlen. Es wird empfohlen, den Wert in getters.js abzurufen , siehe unten

Rufen Sie den Wert im Status in getters.js ab

//getters.js
export default{
    getName(state){
        return state.name;
    }
}


//page.vue
computed:{
    name(){
        return this.$store.getters.getName;
    }
}

Arbeiten mit Daten in mutations.js

//mutations.js
//payload是一个json对象，用于传递数据的容器
export default{
    setNameMutation(state,payload){
        state.name = payload.name;
    }
}



//page.vue
//写法一
methods:{
    doMutaions(){
        this.$store.commit('setNameMutation',{ name:'修改name' })
    }
}
//写法二
methods:{
    doMutaions(){
        this.$store.commit({
            type:'setNameMutation'
            name:'修改name'
        })
    }
}

Hinweis: Mutation muss eine synchrone Funktion sein! ! ! Wenn es sich um eine asynchrone Methode handelt, wissen wir nicht, wann sich der Status ändert, und können ihn daher nicht verfolgen. Wenn asynchrone Vorgänge erforderlich sind, sind Aktionen erforderlich. Der Kern von Aktionen besteht darin, Mutationen zum Ändern von Daten zu verwenden

Bearbeiten Sie Daten in actions.js asynchron

//actions.js
//context是上下文
export default{
    setNameStatic(context,payload){
         setTimeout(function(){
             context.commit('setNameMutation',payload)
         },100)
    }
}


//page.vue
methods:{
    doActions(){
        this.$store.dispatch('setNameStatic',{
            name:'acting'
        })
    }
}