1.什么是Vuex？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2.Vuex组成结构示意图：
vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。如下图：
3.Vuex的核心概念：
1. Store
vuex中最关键的就是store对象，这是Vuex的核心。可以说，Vuex这个插件其实就是一个store对象，每个Vue应用仅有一个store对象。
2. 创建Store
const store = new Vuex.Store({
...});
可见，store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：
- state – 存放状态
- getters – 加工state成员给外界，也可以当做是Vuex的计算属性，对数据进行过滤，筛选。
- mutations – state成员操作
- actions – 提交mutation，异步操作
- mudules – 将store模块化
3.关于Store，还需要注意两点：
- store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；
2.不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。
4.一个完整的store的结构是这样的：
const store = new Vuex.Store({
state: {
// 存放状态
},
getters: {
// state的计算属性
},
mutations: {
// 更改state中状态的逻辑，同步操作
},
actions: {
// 提交mutation，异步操作
},
// 如果将store分成一个个的模块的话，则需要用到modules。
//然后在每一个module中写state, getters, mutations, actions等。
modules: {
a: moduleA,
b: moduleB,
// ...
}
})
5.State
state上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。另外有些状态是组件私有的状态，称为组件的局部状态，我们不需要把这部分状态放在store中去。
当一个组件获取多种状态的时候，则在计算属性中要写多个函数。为了方便，可以使用mapState辅助函数来帮我们生成计算属性。
import {
mapState } from 'vuex';
export default {
// ...
data (){
localState: 1
}
computed: mapState({
// 此处的state即为store里面的state
count: state => state.count,
// 当计算属性的名称与state的状态名称一样时，可以省写
// 映射 this.count1 为 store.state.count1
count1,
//'count'等同于 ‘state => state.count’
countAlias: 'count',
countPlus (state){
// 使用普通函数是为了保证this指向组件对象
return state.count + this.localState;
}
})
}
//上面是通过mapState的对象来赋值的，还可以通过mapState的数组来赋值
computed: mapState(['count']);
//这种方式很简洁，但是组件中的state的名称就跟store中映射过来的同名
对象扩展运算符
mapState 函数返回的是一个对象，为了将它里面的计算属性与组件本身的局部计算属性组合起来，需要用到对象扩展运算符。
computed: {
localState () {
...mapState ({
})
}
}
这样，mapState中的计算属性就与localState计算属性混合一起了。
6.Mutations
mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。
7.Mutations使用方法
mutations方法都有默认的形参：
([state] [,payload])
·state是当前VueX对象中的state
·payload是该方法在被调用时传递参数使用的
例如，我们编写一个方法，当被执行时，能把下例中的name值修改为"jack",我们只需要这样做
index.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.store({
state:{
name:'helloVueX'
},
mutations:{
//es6语法，等同edit:funcion(){...}
edit(state){
state.name = 'jack'
}
}
})
export default store
而在组件中，我们需要这样去调用这个mutation——例如在App.vue的某个method中:
this.$store.commit('edit')
8.Mutation传值
在实际生产过程中，会遇到需要在提交某个mutation时需要携带一些参数给方法使用。
单个值提交时:
this.$store.commit('edit',15)
当需要多参提交时，推荐把他们放在一个对象中来提交:
this.$store.commit('edit',{
age:15,sex:'男'})
接收挂载的参数：
edit(state,payload){
state.name = 'jack'
console.log(payload) // 15或{age:15,sex:'男'}
}
另一种提交方式:
this.$store.commit({
type:'edit',
payload:{
age:15,
sex:'男'
}
})
9.增删state中的成员
为了配合Vue的响应式数据，我们在Mutations的方法中，应当使用Vue提供的方法来进行操作。如果使用delete或者xx.xx = xx的形式去删或增，则Vue不能对数据进行实时响应。
·Vue.set 为某个对象设置成员的值，若不存在则新增
例如对state对象中添加一个age成员
Vue.set(state,"age",15)
·Vue.delete 删除成员
将刚刚添加的age成员删除
Vue.delete(state,'age')
10.Getters
可以对state中的成员加工后传递给外界
Getters中的方法有两个默认参数
state 当前VueX对象中的状态对象
getters 当前getters对象，用于将getters下的其他getter拿来用
例如
getters:{
nameInfo(state){
return "姓名:"+state.name
},
fullInfo(state,getters){
return getters.nameInfo+'年龄:'+state.age
}
}
组件中调用
this.$store.getters.fullInfo
11.Actions
由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。
Actions中的方法有两个默认参数
·context 上下文(相当于箭头函数中的this)对象
·payload 挂载参数
例如，我们在两秒中后执行2.2.2节中的edit方法
由于setTimeout是异步操作，所以需要使用actions
actions:{
aEdit(context,payload){
setTimeout(()=>{
context.commit('edit',payload)
},2000)
}
}
在组件中调用:
this.$store.dispatch('aEdit',{
age:15})
改进：
由于是异步操作，所以我们可以为我们的异步操作封装为一个Promise对象
aEdit(context,payload){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
context.commit('edit',payload)
resolve()
},2000)
})
}
12.map辅助函数
mapActions：
- 在组件内导入import { mapActions } from ‘vuex’
- mapGetters import { mapGetters} from ‘vuex’
其他的mapState，mapMutations也是一样操作