字数
541 字
阅读时间
3 分钟
Vuex 作为 vue 的状态管理模式，实现了一个单向数据流，在全局拥有一个 State 存放数据，组件要想修改 State 中的数据必须通过 Mutation 提交修改信息，Mutation 同时还提供了订阅者模式让外部插件调用获取 State 数据的更新。而所有的异步操作（如调用后端接口异步获取数据）需要走 Action， Action 最后还是通过 Mutation 来修改 State 的数据。最后，根据 State 的变化，渲染到视图上
mutation 和 action 区别
js
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})mutations 中只能进行同步操作，最终的操作结果是 修改State
action 中同步操作和异步操作都可以进行，action 最终的操作结果是 触发mutaion
为什么 mutation 中不能做异步操作
每个 mutation 执行后都会对应到一个新的状态变更，这样 devtools 就能打个快照存下来，状态的追踪，如果 mutation 支持异步，就没办法知道状态是何时更新的，无法很好的进行状态跟踪，给调试带来困难
刷新页面 vuex 失效
js 数据是存储在浏览器堆栈内存中的，当刷新浏览器页面，之前堆栈申请的内存被释放，里面数据自然就被清空了
前端存储 token
vuex + localstorage
多页面之间需要 vuex，强制刷新会丢失内容，所以用到二者结合，刷新之前调用回调 beforeunload 将 vuex 的信息存到 localstorage，页面加载直接读取 localstorage 的信息放入 vuex 中
localStorage – 是永久存储在本地，除非你主动去删除;
sessionStorage – 是存储到当前页面关闭为止，和其他 tab 页没关联;
cookie – 则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取，会和后台进行交互
贡献者
jiechen