笔记

Vue开发者工具的第2个视图就是 Vuex :

重要文件源码

index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'

//引入Vuex
import Vuex from 'vuex'
//使用Vuex插件
//注意:
//    保证 Vue.use(Vuex) 要放在 new .Store()对象前面。 否则会提示: Uncaught Error: [vuex] must call  Vue.use(Vuex) before creating a store instance.
Vue.use(Vuex)

//相当于 服务员 
//准备actions --- 用于 响应组件中的动作
const actions = {
    //context 是一个 miniStore，可以简单理解为一个 mini版的 Store，其中包含 .commit()函数
    //value 是传递过来的参数.
    //由于本例中 jia() 和 jian() 随手通过 context.commit() 提交走了，中间也没干啥事, 所以可以跳过 .dispatch() ，直接让 .vue 使用 .commit()
    /*jia(context,value){
        console.log('actions中的jia被调用了')

        //继续通过 .commit() 往下级提交给 Mutations对象
        //一般将 .commit('大写',)，一看大写就是 mutations对象中的，因为 mutation可以直接操作 state，所以 muatation比较厉害。
        context.commit('JIA',value)
    },

    jian(context,value){
        console.log('actions中的jian被调用了')
        context.commit('JIAN',value)
    }, */

    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了',context) //上下文 content 中也可以找到 state

        if(context.state.sum % 2){
            context.commit('JIA',value)
        }

        //context.dispatch('demo1', value)
    },
    //为了说明 
    /*demo1(context, value){
        console.log('处理了一些事情 -- demo1')

        context.dispatch('demo2', value)
    },
    demo2(context, value){
        console.log('处理了一些事情 -- demo2')
    },*/

    jiaWait(context,value){
        console.log('actions中的jiaWait被调用了')

        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}

//相当于 后厨
//准备mutations --- 用于 操作(修改/加工/维护)数据（state）
const mutations = {
    //state 是 Vuex 中的 state
    //value 是传递过来的参数.
    JIA(state,value){
        console.log('mutations中的JIA被调用了')
        state.sum += value
    },
    JIAN(state,value){
        console.log('mutations中的JIAN被调用了')
        state.sum -= value
    }
}
//准备state --- 用于 存储数据
const state = {
    sum:0 //当前的和
}

//vm new Vue()
//创建 store
/*const store = new Vuex.Store({ //需要传入配置对象
    actions:actions,
    mutations:mutations,
    state:state,
})*/
//简写:
//创建并暴露store 此处∈默认暴露
export default new Vuex.Store({
    //3个配置项
    actions,
    mutations,
    state,
})

##