【Vue.js 知识量化】Vuex 详解

谁借莪１个温暖的怀抱￠ 2022-08-31 02:27 223阅读 0赞

### Vuex 详解 ###

*  Vuex 是什么
 *  单界面的状态管理
 *  多界面状态管理
 *  Vuex 基本使用
 *  State 单一状态树
 *  Getters
 *   *  Getters 作为参数和传递参数
 *  Mutation
 *   *  Mutation 状态更新
     *  Mutation 传递参数
     *  Mutation 提交风格
     *  Mutation 常量类型
     *  Mutation 同步函数
 *  Action
 *   *  Action 的分发
     *  Action 返回的 Promise
 *  Module
 *   *  Module 局部状态
     *  Module 中 Action 的写法
 *  项目结构

> Vuex 官网：[https://next.vuex.vuejs.org/zh/index.html][https_next.vuex.vuejs.org_zh_index.html]

# Vuex 是什么 #

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

> Vuex 也集成到了 Vue 的官方调试工具 [devtools extension][]，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

**状态管理**到底是什么？

*  可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的 Vue 实例中，让其他组件可以使用；如果我们自己封装实现这样的功能也可以，但是缺少了 “**响应式**”。
 *  如果需要在多个组件间（例如兄弟组件）共享状态，使用 Vuex 就可以了。

--------------------

有什么状态是需要我们在多个组件间共享的呢？

*  比如用户的登录状态、用户名称、头像、地理位置信息等等
 *  比如商品的收藏、购物车中的物品等等

# 单界面的状态管理 #

![在这里插入图片描述][81334f005ed9cf4e0407c0cdc1c9ff91.png]

*  **State**：状态，姑且可以当做就是 data 中的属性
 *  **View**：视图层，可以针对 State 的变化，显示不同的信息
 *  **Actions**：这里的 Actions 主要是用户的各种操作，点击、输入等等，会导致状态的改变

代码示例：  
![在这里插入图片描述][a2db837f6681acd21fec47dd24190fa7.png]

*  counter 需要某种方式被记录下来，也就是 **State**
 *  counter 目前的值需要被显示在界面中，也就是 **View**
 *  界面发生某些操作时（如用户点击，或是用户的 input）需要去更新状态，也就是 **Actions**

# 多界面状态管理 #

Vue 已经实现了单界面的状态管理，但是如果是多个界面呢？

*  多个界面都依赖同一个状态：一个状态改了，多个界面需要进行更新
 *  不同界面的 Actions 想修改同一个状态

Vuex 背后的思想：

*  将共享的状态抽取出来，统一进行管理
 *  之后每个视图，需要按照规定好的某种方法，进行访问和修改操作

Vuex 状态管理图例：  
![在这里插入图片描述][0b63528f0df1cf08853ff263fba2f863.png]

# Vuex 基本使用 #

在 store/index.js 中管理状态：

import {  createStore } from "vuex";
    
    export default createStore({ 
      state: { 
        counter: 0
      },
      mutations: { 
        increment(state) { 
          state.counter++;
        },
        decrement(state) { 
          state.counter--;
        }
      },
      actions: { },
      modules: { },
      getters: { },
    });

在 main.js 中将 store 挂载到 Vue 实例中

在其他 Vue 组件中，通过 `this.$store` 获取到 store 对象

*  通过 `this.$store.state` 来访问状态
 *  通过 `this.$store.commit('xxx')` 来执行 mutations 中的方法，从而修改状态

> 为了使 Vuex 可以更明确的追踪状态的变化，不要直接改变 `store.state.count` 的值，通过 mutations 中的方法来修改 state 中的状态。

# State 单一状态树 #

如果状态信息是保存到多个 store 对象中的，那么之后的管理和维护等等都会变得特别困难，所以 Vuex 使用了单一状态树来管理应用层级的全部状态、

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

# Getters #

我们需要从 store 中获取一些 state 变异后的状态，比如下面的 store 中：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]  
获取学生年龄大于20的个数：

*  在组件中使用 computed  
    ![在这里插入图片描述][4699b86e83f24174a9ee17a8864daedf.png]
 *  使用 Vuex 的 getters：  
    ![在这里插入图片描述][317a6785ba254700b4e46c567725dcd3.png]

## Getters 作为参数和传递参数 ##

如果我们已经有了一个获取所有年龄大于 20 岁学生列表的 getters，那么代码可以这样来写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 1]  
getters 默认不能传递参数，如果想要传递参数，需要**让 getters 本身返回另一个函数**；  
比如上面的案例中，我们希望根据 ID 获取用户的信息：  
![在这里插入图片描述][d77dc3fc170449d3917a86646ac2017b.png]

# Mutation #

## Mutation 状态更新 ##

Vuex 的 store 状态的更新唯一方式：提交 Mutation

Mutation 主要包括两部分：

*  字符串的**事件类型 (type)**
 *  一个**回调函数 (handler)**，该回调函数的第一个参数就是 state

mutation 的定义方式：  
![在这里插入图片描述][950f27738647436091a56c1ebb835f5c.png]  
通过 mutation 更新：  
![在这里插入图片描述][6922b6d734d443109e35e59c6fa2e15b.png]

## Mutation 传递参数 ##

在通过 mutation更 新数据的时候，有时候需要希望携带一些额外的参数

*  参数被称为 mutation 的 **载荷 (Payload)**

示例代码：  
![在这里插入图片描述][b7ac8b33350a4c518b177e569fde2b1f.png]  
多个参数的传递以对象的形式进行，也就是 payload 是一个对象：  
![在这里插入图片描述][f7131b362ce643b8b4b4825439fc783a.png]

## Mutation 提交风格 ##

上面的通过 commit 进行提交是一种普通的方式

Vue 还提供了另外一种风格，它是一个包含 type 属性的对象  
![在这里插入图片描述][b59c1d1909fb4e57b3f52ec93c269d70.png]  
Mutation 中的处理方式是将整个 commit 的对象作为 payload 使用，所以代码没有改变：  
![在这里插入图片描述][b959fdaa31754745853b659951e75fca.png]

## Mutation 常量类型 ##

当项目增大时，Vuex 管理的状态越来越多，需要更新状态的情况越来越多，意味着 Mutation 中的方法越来越多。方法过多，导致使用者需要花费大量的精力去记住这些方法，甚至是多个文件间来回切换，查看方法名称，甚至如果不是复制的时候，可能还会出现写错的情况

在各种 Flux 实现中，一种很常见的方案就是：**使用常量替代 Mutation 事件的类型**，我们可以将这些常量放在一个单独的文件中，方便管理

--------------------

创建一个文件：mutation-types.js，并且在其中定义我们的常量

定义常量时可以使用 ES2015 中的风格，使用一个常量来作为函数的名称：  
![在这里插入图片描述][b51805e7636f42b38a401689cf22c8d9.png]  
store 中用常量字符串来定义函数：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 2]  
组件中使用常量字符串调用 store 的 mutations 更改 state：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 3]

## Mutation 同步函数 ##

通常情况下，Vuex 要求我们 Mutation 中的方法必须是同步方法，如果使用了异步操作，devtools 将不能很好的追踪 state 中的数据的改变。

# Action #

Action 类似于 Mutation，但是是用来代替 Mutation 进行异步操作的

Action 的基本使用：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 4]  
**context 是和 store 对象具有相同方法和属性的对象**

*  也就是说，我们可以通过 context 去进行 commit 相关的操作，也可以获取 context.state 等
 *  注意，context 和 store 并不是同一个对象

## Action 的分发 ##

在 Vue 组件中，如果我们调用 action 中的方法，那么就需要使用 dispatch  
![在这里插入图片描述][56920ce413c64548a37a7695a70e7477.png]  
它同样支持传递 payload：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 5]

## Action 返回的 Promise ##

Promise 经常用于异步操作，在 Action 中，我们可以将异步操作放在一个 Promise 中，并且在成功或者失败后，调用对应的 resolve 或 reject

示例代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 6]

# Module #

Vue 使用单一状态树，那么意味着很多状态都会交给 Vuex 来管理

*  当应用变得非常复杂时，store 对象就有可能变得相当臃肿
 *  为了解决这个问题，Vuex 允许我们将 store 分割成模块 (Module)，而每个模块拥有自己的 state、mutations、actions、getters 等  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 7]

## Module 局部状态 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]  
注意：虽然的 doubleCount 和 increment 都是定义在对象内部的，但是在调用的时候，依然是通过 `this.$store` 来直接调用的

## Module 中 Action 的写法 ##

局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 8]  
如果 getters 中也需要使用全局的状态，可以接受更多的参数  
![在这里插入图片描述][2fca9d679bbe46368b150e5a8d658082.png]

# 项目结构 #

良好的项目结构可以使代码更加清晰嘛，官方推荐的项目结构： 1  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 9]

[https_next.vuex.vuejs.org_zh_index.html]: https://next.vuex.vuejs.org/zh/index.html
[devtools extension]: https://github.com/vuejs/devtools
[81334f005ed9cf4e0407c0cdc1c9ff91.png]: /images/20220829/2299d6bd98fb4ea183d323af50825cdd.png
[a2db837f6681acd21fec47dd24190fa7.png]: /images/20220829/eab75e0f52004bea9b9ad26532d9dd1b.png
[0b63528f0df1cf08853ff263fba2f863.png]: /images/20220829/16567a06d02b40428a10ebbd8e1836c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]: /images/20220829/9566c9229203432097b29ed381689739.png
[4699b86e83f24174a9ee17a8864daedf.png]: /images/20220829/6049d40d8d7c4c53835d04d4870fc071.png
[317a6785ba254700b4e46c567725dcd3.png]: /images/20220829/45fd2ab2e88d40b5a9f423a5d09bc594.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 1]: /images/20220829/c3f79de8fee24ed29209f495f81a5c32.png
[d77dc3fc170449d3917a86646ac2017b.png]: /images/20220829/333dd5587abd472abb3c172f22f50cd1.png
[950f27738647436091a56c1ebb835f5c.png]: /images/20220829/e90c3be090e34d9787920174028f39a2.png
[6922b6d734d443109e35e59c6fa2e15b.png]: /images/20220829/50e8615dfd064e739c9fa47ab799038c.png
[b7ac8b33350a4c518b177e569fde2b1f.png]: /images/20220829/4083203c4ca24265a31fa8aa3794292a.png
[f7131b362ce643b8b4b4825439fc783a.png]: /images/20220829/bb4da39ad75d4c1aa563c349877c3077.png
[b59c1d1909fb4e57b3f52ec93c269d70.png]: /images/20220829/7fbe0f1afd2c4297b49166248f0178b7.png
[b959fdaa31754745853b659951e75fca.png]: /images/20220829/2decf67233a84f64870fc5700af15f2f.png
[b51805e7636f42b38a401689cf22c8d9.png]: /images/20220829/66bb2b0e3cfd4769b919e19ef9ba1ffa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 2]: /images/20220829/6a36e751dca14251826c07b7d5ca717d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 3]: /images/20220829/924613f16d9d4296ad80a76f0135f075.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 4]: /images/20220829/e22dd98c906b42f593a4afd89a4c8e3c.png
[56920ce413c64548a37a7695a70e7477.png]: /images/20220829/48730bc7a4754b27b874ddfeaa003aa1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 5]: /images/20220829/1ca74bfeab724c79b002ee864ca80f6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 6]: /images/20220829/ef39352310e144e4bf170517f96e0536.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 7]: /images/20220829/4b3bb070b93a45e3a9cf2bf775b35ed4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20220829/bcb6a04223e44f3db925eed6698ee3d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 8]: /images/20220829/4031daea1f9749459f8dbe3cbd893694.png
[2fca9d679bbe46368b150e5a8d658082.png]: /images/20220829/596e48d47ef541529e6feb7eda0bad8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 9]: /images/20220829/af74acea30474e2c962e250ac005a88a.png