Reseña simple y resumen de vuex

vuex: revisión

Hay tres bloques principales en la estructura: estado, mutaciones, acciones.

Las mutaciones operan directamente en el estado

Las acciones usan commit para llamar a mutaciones para manipular indirectamente el estado

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
    
    
   
    addOdd(context,value){
    
     //奇数才加
   
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
    
     //利用上下文拿到state作判断
   
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
    
     //延时加
   
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
    
    
   
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
    
    
   
    ADD(state,value){
    
     //普通的加
   
        state.sum += value
    },
    SUBTRACT(state,value){
    
     //普通的减
   
        state.sum -= value
    }
}
//准备state对象——保存具体的数据
const state = {
    
    
   
    sum:0 //当前的和
}
   
//创建并暴露store
export default new Vuex.Store({
    
    
   
    actions,
    mutations,
    state
})

Uso: utilice principalmente .dispatch para llamar a acciones

incrementOdd(){
    
    
    this.$store.dispatch('addOdd',this.n)
},
incrementWait(){
    
    
    this.$store.dispatch('addWait',this.n)
},