vuexの簡単なレビューと概要

vuex: レビュー

この構造には、状態、突然変異、アクションという 3 つの主要なブロックがあります。

突然変異は状態に直接作用します

アクションはコミットを使用してミューテーションを呼び出し、間接的に状態を操作します

//引入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
})

使用方法: 主に .dispatch を使用してアクションを呼び出します。

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