Explique cómo usar vuex en detalle, y puede entenderlo después de leerlo

Vuex es el administrador estatal de vue.js, que realiza el intercambio de datos de cada página y se divide en 5 partes:

• Estado: almacenar el estado de los datos

• Compradores: adquisición estatal

• Mutaciones: desencadenar eventos sincrónicos

• Acciones: enviar mutación, operación asíncrona

• Módulos: módulo vuex

El método de uso es el siguiente:

Cree una nueva instancia de la tienda vuex en store/index.js y registre los módulos principales

//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

Importe y use la instancia de la tienda en main.js

//main.js

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

Los siguientes ejemplos de submódulos

Tabla de contenido

Defina un nombre en state.js

Obtenga el valor en estado en getters.js

Trabajando con datos en mutaciones.js

Manipular datos de forma asíncrona en actions.js

---

Defina un nombre en state.js

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



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

No se recomienda este método para obtener el estado, se recomienda obtener el valor en getters.js , consulte a continuación

Obtenga el valor en estado en getters.js

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


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

Trabajando con datos en mutaciones.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'
        })
    }
}

Nota: ¡La mutación debe ser una función síncrona! ! ! Si es un método asíncrono, no sabemos cuándo cambiará el estado, por lo que no podemos rastrearlo. Si se requieren operaciones asíncronas, se necesitan acciones. La esencia de las acciones es usar mutaciones para cambiar los datos.

Manipular datos de forma asíncrona en actions.js

//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'
        })
    }
}