Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

Vuex的主要概念

State:Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态

mapState 辅助函数当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性

Getter:Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

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

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

Mutation 需遵守 Vue 的响应规则: 1.最好提前在你的 store 中初始化好所有所需属性。

2.当需要在对象上添加新属性时,你应该:使用 Vue.set(obj, 'newProp', 123), 或者以新对象替换老对象

使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用

Action:Action 类似于 mutation,不同在于: 1.Action 提交的是 mutation,而不是直接变更状态。

2.Action 可以包含任意异步操作

使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

Module:Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

Vuex流程

Vuex需遵守规则

Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:

1.应用层级的状态应该集中到单个 store 对象中。

2.提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

3.异步逻辑都应该封装到 action 里面。

最后更新时间: 10/8/2019, 7:41:17 PM