Vuex 整理

Vuex 流程

全局单例，主要是为了解决 兄弟组件之间 传值不太方便的问题。是利用了 Vue 插件式机制，使用 Vue.use(vuex)注入进来，然后使用 mixin 在 beforeCreate 的生命周期中把 vuex 的初始化逻辑混入。

流程：组件触发一些动作 -> 提交到 Mutations 中 -> Mutations 去改变 State -> State 数据改变后会触发 render 重新渲染

Vuex 是如何让各个组件响应式更新

对于 Vuex 的 state，是通过实例化 Vue，来实现响应式，vuex 的 getters 是用了 Vue 的计算属性来实现的

1
2
3
4
5
6
store._vm = new Vue({
  data: {
    $$state: state,
  },
  computed,
})

action 和 mutation 区别

action 可以包含异步操作，同时提交的也是 Mutation。
Mutation 必须是同步函数，因为如果异步的话，没办法确认什么时候异步事件才能返回，因此在回调函数中的状态改变是不能追踪的。

实际上我理解就是一个原子性的操作，Mutation 只做状态改变。然后 action 只是一层封装，不受控的代码都集中放在 action 中，只是一个架构性概念，不管里面干什么，最后用 Mutation 触发状态改变就行。

Vuex 和 localStorage 区别

  • vuex 就是一个类似全局变量的东西，存在内存里
  • localStorage 是浏览器存储的一个方式，存在本地文件中

Vuex 有哪几种属性

  1. state：最基本的存储数据的
  2. getters：从基本数据经过一些操作之后派生出来的数据
  3. mutations：同步提交修改数据
  4. actions：对 mutations 的一层封装，一般如果异步操作之后再修改数据会用 actions