vuex工作原理及示例

原理图详解

state是对象，用于存储具体数据

Dispatch（相当于迎宾）是API，在组件方法中被调用（this.$store.dispatch("add",value)），两个参数，第一个是动作类型（实质是一个函数，配置在actions中），第二个是需要传递的值

Actions（相当于服务员）是对象，用于响应组件中的动作，配置add(context,value){}，需要向后端发送请求或者有其他逻辑时必需，不需要时可以直接在组件中通过this.$store.commit("ADD",value)触发Mutations中的ADD方法；两个参数，一个是context对象（上下文），另一个是收到的传递过来的值；回调中调用context.commit("ADD",value)
Actions中配置的方法可以将复杂逻辑拆分成几个不同方法，然后通过在回调中context.dispatch("其他逻辑",value)进行传递数据

commit('ADD',value)（相当于服务员把点好的单递给后厨的动作）是API，在Actions配置对象回调函数中被调用两个参数，ADD配置在Mutations中

Mutations（相当于后厨）是对象，用于操作state中的数据，配置ADD(state,value){}，回调函数会收到state和value两个参数，函数体中直接对state进行操作，从而实现修改数据

三个对象都被store管理

示例

组件方法

methods: {
    add(){
        // this.sum += this.n     不使用vuex时的操作
        // this.$store.dispatch("add",this.n)   完整操作
        this.$store.commit("ADD",this.n)   //绕过actions直接commit的操作
    },
    subt(){
        // this.sum -= this.n      不使用vuex时的操作
        // this.$store.dispatch("subt",this.n)    完整操作
        this.$store.commit("SUBT",this.n)  //绕过actions直接commit的操作
    },
    addOdd(){
    	//不使用vuex时的操作
        // if(this.sum % 2){
        //     this.sum += this.n
        // }
        this.$store.dispatch("addOdd",this.n)  //使用vuuex
    },
    addWait(){
    	//不使用vuex时的操作
        // setTimeout(() => {
        //     this.sum += this.n
        // }, 1000);
        this.$store.dispatch("addWait",this.n)   //使用vuuex
    }
}

src/store/index.js配置

//该文件用于创建Vuex核心store

//引入vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用vuex插件，需要引入vue
Vue.use(Vuex)

//actions用于响应组件中的动作
const actions = {
	//被绕过的actions
    // add(context,value){
    //     context.commit('ADD',value)
    // },
    // subt(context,value){
    //     context.commit('SUBT',value)
    // },
    addOdd(context,value){
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
        setTimeout(() => {
            context.commit('ADD',value)
        }, 1000);
    }
}
//mutations用于操作state中的数据
const mutations = {
    ADD(state,value){
        state.sum += value
    },
    SUBT(state,value){
        state.sum -= value
    }
}
//state用于存储具体数据
const state = {
    sum:0
}

//创建并暴露（导出）store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

总结

组件中读取vuex中的数据：$store.state
组件中修改vuex中的数据：this.$store.dispatch('actions中的方法名'，数据)或this.$store.commit('mutations中的方法名'，数据)
注意：如果没有网络请求或者其他业务逻辑，组件中可以越过actions，即在组件中不调用dispatch，直接调用commit