vuex

vue2.0一个独一无二的状态共享框架。
共五个概念：state、setter、state、mutation、action、module。

什么时候使用vuex：
1多个组件依赖于同一状态。
2.来自不同组件的行为需要变更同—状态。

三个核心模块

state：放置状态的位置，所有需要共享的状态只能放在state里面

mutation：改变状态必须通过mutation，只能写同步代码，原因：数据快照-devtools打印

为什么只能同步，官方代码

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

官方解释：现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

个人看法：因为更改state的函数必须是纯函数，纯函数既是统一输入就会统一输出，没有任何副作用；如果是异步则会引入额外的副作用，导致更改后的state不可预测。纯函数概念：输入参数固定-输出结果固定。

action：逻辑操作，动作，异步放在action中-得到的状态更改也必须通过mutation

const store = new Vuex.Store({
	state:{
	  name:"aa" //初始化的时候从缓存读取
    },
    mutations:{
    	//两个参数（state,payload)
    	//payload 载荷参数（其实就是参数，可以在这里传递任意的结构的数据） 
		updateName(state,payload){
			state.name=payload //赋值 响应式变化
		}
	},
	actions:{
		//this.$store = context 等价的
		getAsyncName(context){
			setTimeout({
				//模拟得到后台数据，修改state
				//俩个参数（"需要提交的mutation"，需要传入mutation的载荷）
				context.commit("updateName","需要传入mutation的载荷")
			},1000)
		}
	}
})

vuex持久化

持久化分为前端持久化，后端持久化都是通过缓存来做的，也就是面试常问的vuex刷新页面时数据丢失问题。
localStorage 自己写也可以，也可以用插件。
原理：刷新页面-所有的东西都销毁重来vuex也会重来，要保证重新初始化的时候能够读取到之前存储的数据，从缓存中读取数据。
如何做：初始化的时候从缓存中读取。
修改的状态的时候存入缓存。