vuex的简单复习和总结

vuex：复习

结构中主要是三大块：state，mutations，actions

mutations是直接操作state的

actions是用commit调用mutations的，从而间接操作state

//引入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调用actions

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