1.什么是vuex？

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

2.什么时候使用vuex?

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

3.vuex的使用

1.安装vuex

npm i vuex --save

2.js入口文件中引入store实例
src/main.js

 import Vue from 'vue'import App from './App.vue'import store from './store'//创建vue实例new Vue({el:'#app',render:h=>h(App),store})

3.引入vuex并使用
src/store/index.js

  import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)//使用export default new Vuex.Store({state:{sum:0},actions:{},mutations : {ADD(state,value){state.sum+=value}},getters:{},})

4.使用：

1. store： 读取数据
   第一种方式：this.$store.state.sum
   第二种方式：借助mapState生成计算属性，从state中映射数据。使用的时候直接插值语法{{sum}}

 import {mapState} from 'vuex'computed:{...mapState({sum:'sum'})//对象写法...mapState(['sum'])//数组写法（简写）}

2. commit：修改数据
   Mutation： 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
   第一种方式：

methods:{increment(value){this.$store.commit('ADD',3)}
}

第二种方式：参数必须在调用时传递（实参）

<button @click="increment(n)">加+</button>import {mapMutations} from 'vuex'
export default{data(){return{n:2}},methods:{//借助mapMutations生成对应的方法...mapMutaions({increment:'ADD'}),//对象写法...mapMutaions(['ADD']),//数组写法,此时调用函数时绑定函数为ADD，即<button @click="ADD(n)">加+</button>}
}

3.Action： 类似于mutation，不同在于：

1. Action提交的是mutation，而不是直接变更状态
2. Action可以包含任意异步操作
   使用：
   1.store中定义actions

mutations:{ADD(state,value){state.sum+=value}
},
actions: {addWait (context,value) {setTimeout(()=>{context.commit('ADD',value)},1000)}
}

2.触发：
第一种方式：this.$store.dispatch('action中的方法名',数据)
第二种方式：参数必须在调用时传递（实参）

 <button @click="incrementOdd(5)">等一秒钟再加+</button>import {mapActions} from 'vuex'methods:{...mapActions({incrementOdd:'addWait'}),//对象写法...mapMutaions(['addWait']),//数组写法,此时调用函数时绑定函数为ADD，即<button @click="addWait(5)">等等再加+</button>}

4.Getters： store的计算属性，用于将state中的数据进行加工

1. 加工数据

 getters:{bigSum(state,getters){return state.sum*10}}

2. 使用数据:
   第一种方式： <span>乘积结果为：{{$store.getters.bigSum}}</span>
   第二种方式：借助mapGetter生成计算属性，从getters中映射数据。

 import {mapGetters} from 'vuex'computed:{...mapGetters({bigSum:'bigSum'})//对象写法...mapGetters(['bigSum'])//数组写法（简写）}

以上所有的映射函数mapState mapMutations mapActions mapGetters在多数据或状态时使用在项目中能帮助我们实现快速简便开发