一、Vuex是什么？

        在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（read/write），也是一种组件之间通信的方式，适用于任意组件之间的通信。

二、搭建Vuex环境

1、创建文件：src/store/index.js

//该文件用于创建vuex中最为核心的store
import Vue from 'vue'
//引入vuex
import vuex from 'vuex'
//应用vuex插件
Vue.use(vuex)
// 准备action：用于响应组件中的动作
const actions = {}
//准备mutations：用于操作数据（state）
const mutations = {}
//准备state:用于存储数据
const state = {}// 创建并暴露store
export default new vuex.Store({actions,mutations,state
})

2、main.js中创建vm时传入store配置项

import Vue from 'vue'
// 引入app组件
import App from './App.vue'
//引入store
import store from './store/index'
Vue.config.productionTip = false
//创建vm
new Vue({render: h => h(App),store,beforeCreate() {Vue.prototype.$bus = this}
}).$mount('#app')

三、基本使用

1、初始化数据，配置actions、mutations、store.js

2、组件中读取vuex中的数据：$store.state.xx

3、组件中修改vuex中的数据：

$store.dispatch('action中的方法名‘，数据）

$store.commit('mutations中的方法名‘，数据）——>在没有网络请求或其他业务逻辑，可直接越过actions，到mutations中操作。

4、配置项getters：加工state里的数据，后让组件组件读取加工后的数据。

$store.getteers.newsum

//在store.js里追加getters配置
const getters = {newsum(state){return state.sum*100}
}

5、map方法的使用

1、mapState：用于映射state中的数据为计算属性

computed: {

    //对象写法

    ...mapState({sum:"sum", name:"name", age:"age"}),

    //数组写法

    ...mapState(["sum", "name", "age"]),

}，

2、mapGetters：用于映射getters中的数据为计算属性

computed: {

    //对象写法

     ...mapGetters({sum:"sum", name:"name", age:"age"}),

    //数组写法

    ...mapGetters(["sum", "name", "age"]),

}，

3、mapActions：用于生成与actions对话的方法，即包含$store.dispatch(xxx)的函数

methods: {

    //对象写法

     ...mapActions({ increodd: "jiaodd", increwait: "wait" }),

}，

4、mapMutations：用于生成与mutations对话的方法，即包含$store.commit(xxx)的函数

methods: {

    //对象写法

     ...mapMutations({ increament: "JIA", devreament: "JIAN" }),

}，

         mapMutations、mapActions在使用时，若需要传递参数需要，在绑定事件时就传递好参数（<button @click="increament(n)">+</button>），否则参数就会是事件对象event。