Vuex 入门

电玩女神 2023-10-19 08:00 123阅读 0赞

### 为什么使用 Vuex ###

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

#### 原因 ####

单向数据流（系统运行是单向的）：数据驱动视图更新，用户在 View 进行一些操作触发 Actions，再去更改 State，并不是 View 直接更改 State。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4_size_16_color_FFFFFF_t_70]

**带来的问题：**

> 当系统中一份数据被多个组件使用时，如果其中一个组件对此数据进行修改，其他组件也应该进行同步修改。

管理方式一：一个共同父节点，此种方式成本高。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4_size_16_color_FFFFFF_t_70 1]  
管理方式二：使用 provide/inject，不适合节点树较大的项目。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4_size_16_color_FFFFFF_t_70 2]

#### Vuex 运行机制 ####

Vuex 提供数据，驱动 Vue Components，通过 dispatch 派发 Actions，在 Actions 进行异步操作（使用 ajax 接口获取后端数据；若无异步操作，可以直接从 Vue Components 提交到 ，），通过 Commit 提交给 Mutations，由 Mutations 更改 State，Devtools 中记录数据变化。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4_size_16_color_FFFFFF_t_70 3]

#### 核心概念 ####

State：`this.$store.state.xxx` 取值，mapState 取值

Getter：`this.$store.getters.xxx` 取值（可以认为是 store 的计算属性，就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算），mapGetters 取值

Mutation：`this.$store.commit(“xxx”)` 赋值（Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数），mapMutations 赋值

Action：`this.$store.dispatch(“xxx”)` 赋值（与 Mutation 类似），mapActions 赋值

> 与 Mutation 的不同：
> 
> 1.  Action 提交的是 mutation，而不是直接变更状态。
> 2.  Action 可以包含任意异步操作。

Module：状态

#### 底层原理 ####

State：提供一个响应式数据

Getter：借助 Vue 的计算属性 computed 来实现缓存

Mutation：更改 State 的方法

Action：触发 Mutation 方法

Module：Vue.set 动态添加 state 到响应式数据中

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190818214001508.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190818213906313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190818213923841.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190818213937779.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4,size_16,color_FFFFFF,t_70