Vuex简单介绍

Vuex

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

每一个 Vuex 应用的核心就是 store，里面又包括: （1）state（数据）：用来存放数据源，就是公共状态; （2）getters（数据加工）：有的时候需要对数据源进行加工，返回需要的数据； （3）actions（事件）：要执行的操作，可以进行同步或者异步事件 （4）mutations（执行）：操作结束之后，actions通过commit更新state数据源 （5）modules：使用单一状态树，致使应用的全部状态集中到一个很大的对象，所以把每个模块的局部状态分装使每一个模块拥有本身的 state、mutation、action、getters、甚至是嵌套子模块；

vuex的工作流程就是：

（1）通过dispatch去提交一个actions，

（2） actions接收到这个事件之后，在actions中可以执行一些异步|同步操作，根据不同的情况去分发给不同的mutations，

（3）actions通过commit去触发mutations，

（4）mutations去更新state数据，state更新之后，就会通知vue进行渲染。

vuex的核心概念

核心概念

单一状态树

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

单一状态树的优势：

• 如果你的状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难;

• 所以Vuex也使用了单一状态树来管理应用层级的全部状态；

• 单一状态树能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中，也可以非常方便的管理和维护；

注意:

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

state 状态

维护整个项目的共享状态, 在组件中使用 this.$store.state.属性获取数据, 简写: 把获取state数据封装成一个计算属性

vuex提供的mapState函数,

我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

使用步骤:

在组件中从vuex中导入 mapState函数

在计算属性,使用mapState函数把state中状态转换为计算属性

如果组件有自己的计算属性,不是从state获取的, 上述写法无法实现, 使用对象展开语法 ...mapState()

如果计算属性名与vuex中state的属性名一样的,值就是state属性值, 简写: mapState([“count”,“username”]

getters

某些属性我们可能需要经过变化后来使用，这个时候可以使用getters：Vuex 允许我们在 store 中定义“getters”（可以认为是 store 的计算属性）

我们在其他组件可以访问Getter 对象,Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值

也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：你可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload）

你不能直接调用一个 mutation 处理函数。这个选项更像是事件注册：“当触发一个类型为 INCREMENT 的 mutation 时，调用此函数。”要唤醒一个 mutation 处理函数，你需要以相应的 type 调用 store.commit 方法

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读

action

如果我们希望在Vuex中发送网络请求的话需要如何操作呢？那我们就使用Action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。

• Action 可以包含任意异步操作。

action也有对应的辅助函数：使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）

vuex持久化

Vue项目中使用Vuex作为状态管理，相当于全局的变量存储，可以在所有的vue组件中共享数据、动态修改其状态。vuex是单向数据流，存在vuex中的变量都是响应式数据，组件中一般会通过computed来使用store中的状态、且有缓存

但是当我们去刷新浏览器的时候，store中的状态都会被清空、重新初始化为最初的状态，在某些情况下，我们可能需要将这些状态保存下来，如何让vuex或pinia的状态持久化存储?

要实现持久化存储，简单来说就是将其状态保存到localStorage或者sessionStorage中 .然后在给每个状态默认值的时候就从localStorage或sessionStorage中取就可以了也就是咱们直接手写实现，另外一种方式就是使用第三方插件（vuex-persistedstate或者vuex-persist）

使用vuex-persistedstate持久化插件, 缓存数据:

1. 安装vuex-persistedstate

yarn add vuex-persistedstate

1. 在store目录下index.js配置

   导入函数

   import createPersistedState from "vuex-persistedstate";

   配置插件