Vuex 集中式数据管理

vuex = 系列操作（dispatch / commit ) +对象（state + actions + mutation）+ map方法4个

使用指南：

1、安装vuex

npm i vuex@3，（注意vue2版本用vuex@3，vue3版本用vuex@4）

2、创建store/index.js文件，并引入依赖，初步配置

//用于创建vuex最为核心的store
import vuex from "vuex";
import Vue from "vue";
Vue.use(vuex)//创建 vm.$store

//响应组件的动作
const actions = {}
//存储数据
const state={}
//数据修改
const mutations={}

export default new vuex.Store({
    state,
    actions,
    mutations,
})

3、main.js中，引入 store文件，并vm中要使用

//引入vuex核心体
import store from './store'
new Vue({
  render: h => h(App),
  router,
  store //使用 vm.$store
}).$mount('#app')

4、组件中读取vuex的数据    {{this.$store.state.sum}}

       组件中修改vuex的数据 $store.dispatch('actions方法名',value) 或 $store.commit('mutation方法名',value)

5、再store/index.js中，数据初始化、配置actions、配置mutations、配置setters

state	存储数据（集中式共享数据）
actions	对数据进行获取业务处理
mutations	执行数据修改，可接受参数
getters	对源数据进行固定换算
	map的四个方法：
mapState	帮助我们映射state中的数据，为计算属性
mapGetters	帮助我们映射getters中的数据，为计算属性

//用于创建vuex最为核心的store
import vuex from "vuex";
import Vue from "vue";
Vue.use(vuex)//创建 vm.$store

//存储，数据源
const state={
    sum:0
}
//响应组件的动作 （作用业务逻辑处理，与服务器交互）
const actions = {
    jiaOdd(context,value){//参数为上下文
        if(context.state.sum%2!==0){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit('JIA',value)
        }, 2000);
    }
}
//数据，传参修改  （作用：执行数据的修改，devtools【小工具】显示）
const mutations={
    JIA(state,value){//参数为vuex的数据
        state.sum+=value;
    },
    JIAN(state,value){
        state.sum-=value;
    }
}
//用于将state的数据源，进行固定加工
const getters={
    bigSum(state){
        return state.sum*10
    }
}

export default new vuex.Store({
    state,
    actions,
    mutations,
    getters,
})