Vuex的官方文档笔记

一,它是什么?(三句话)

1,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
针对这一点,因为vue开发的大多是具备许多组件构成的项目,所以在vue项目 中,vuex有大量使用的场景需求。
2,它采用集中式存储管理应用的所有组件的状态
传统的组件间传值,需要具备父子关系,利用属性绑定父传子,事件绑定子传父,利用事件Bus传递兄弟组件间的数据。当组件一多,业务逻辑一复杂,就会显得非常呆板混乱:
在这里插入图片描述
在没有使用vuex的时候,两个不相干组件间的数据传递会牵扯到整个链条上的所有组件,非常麻烦。而引入vuex之后,它在全局提供了一个所有组件都可以访问的数据库,里面存放着组件间共享的数据,这样一来,各个组件就可以直接从这里获取数据,修改数据了。数据的传递由原来的链式传递,变成了多(各个组件)对一(一个数据库)的简单模式。
3,并以相应的规则保证状态以一种可预测的方式发生变化。
它提供了mutation和action,对这个数据库的数据修改方法,就写在这个库之中,于是就能够很容易地预测和查看数据的变化,因为如果数据的修改方法是写在各个组件中,一旦需要查看数据变化的方法,就得挨个组件查找,很麻烦。
总结下来,就是:Vuex是一种状态管理模式,存在的目的是共享可复用的组件状态。

二,五个核心属性

State、 Getter、Mutation 、Action、 Module

state:

Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个
“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状
态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前
应用状态的快照。

State属性是Vuex的单一状态树

Getter

有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数
Getter类似于Vue的 computed 对象。是根据业务逻辑来处理State,使得生成业务所需的属性。

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

Mutation是唯一用来更改Vuex中状态的方法。

Action

Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
Action是用来解决异步操作而产生的,它提交的是Mutation。

Module

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

Module是将Vuex模块化的对象,目的是更好的维护。

四,常用方式

对于state和getter中的数据,因为在组件中需要常常用到,使用映射的方法比较方便:
在这里插入图片描述
而方法,函数在组件中调用的少,就这种方法比较省事:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42349568/article/details/108881187