Vuex小知识

Vuex定义

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
• 开发中大型项目时，要更好的管理外部组件，Vuex较为便利。

状态管理模式

• state 驱动应用的数据源
• view 以声明方式将state映射到视图
• actions 响应在view上的用户输入导致的状态变化

state 单一状态树

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

mapState 辅助函数

辅助函数帮我们生成计算属性，其实也是提高用户体验度；
mapState 函数返回的是一个对象，我们若要让它和据不计算属性混合使用，可以用...mapState将对象展开。

getter 可认为store的计算属性

• getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
• Getter 接受 state 作为其第一个参数：

  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

• getter也可以接受其他getter
  作为第二个参数；
• 可以通过让 getter 返回一个函数，来实现给 getter 传参。

mapGetters 辅助函数

• 辅助函数是将 store 中的 getter 映射到局部计算属性

Mutation

• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
• 每个 mutation 都有一个字符串的 事件类型和 一个 回调函数 。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

Mutation 需遵守 Vue 的响应规则

1. 最好提前在你的 store 中初始化好所有所需属性。
2. 当需要在对象上添加新属性时，应该

• 使用 Vue.set(obj, 'newProp', 123),
• 以新对象替换老对象；

【mutation必须是同步函数】

Action

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
• Action 通过 store.dispatch 方法触发.
• mutation 必须同步执行,Action 就不受约束.