vuex理解

短命女 2021-09-19 20:06 442阅读 0赞

**什么是vuex**

> Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

**什么是状态管理**

> 先了解下 **单向数据流** 帮助我们更好地理解状态管理。平时我们写的简单vue文件中，包含data，template，methods这三个部分可以分别把  
> data 看作 state，驱动应用的数据源，也就是定义的变量；  
> template 看作 view 以声明方式将 state 映射到视图, 显示变量；  
> methods 看作 actions，响应在 view 上的状态变化；  
> 这就是下图状态管理包含的几个部分：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70]  
> 因为上图状态管理只在这一个vue文件中使用，所以就形成了“**单向数据流**”  
> ![在这里插入图片描述][20190604110423397.png]  
> 但是如果我们遇到**多个视图依赖于同一状态**和**来自不同视图的行为需要变更同一状态。**，这种单向数据流虽然也能通过组件兄弟/父子通信传值来实现，但是代码会变得复杂不好维护。因此，  
> **1.把组件的共享状态抽取出来，以一个全局单例模式管理**  
> **在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为**（这句话的意思简单理解: vuex把项目中共享状态一般会把抽离出来放在store文件夹中，这时项目中所有的vue文件template都是视图，而store中的状态可以通过this.$store.去获取你定义的状态，能做到不管哪个vue文件都能获取到，也都能变更和触发store的行为）  
> **2.通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护**（这句话不好理解就简单理解成: vuex中定义了state， getters, mutations, actions四个属性，不同的属性做不同的事情就是用来维护状态，视图，行为的独立性）  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 1]

**VUEX**

> 简单来说，vuex 就是使用一个 store 对象来包含所有的应用层级状态，也就是数据的来源。当然如果应用比较庞大，我们可以将store模块化，也就是每个模块都有自己的 store。

> 如果还是不能理解，就先将vuex四个属性记下来：state， getters, mutations, actions，然后再分析四个属性的特点，什么地方会用到，是怎样连接在一起的? 以下讲vuex的四个属性

**1、State**

> state 上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 2]  
> 其实就是把 state 上保存的变量转移到计算属性上。当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。  
> **computed: mapState(\[  
> // 映射 this.count 为 store.state.count  
> ‘count’  
> \])**

**2、Getters**

> getters上简单来说就是存放一些公共函数供组件调用。getters 会暴露为 store.getters 对象，也就是说可以通过 store.getters\[属性\]来进行相应的调用。mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，其实也就是从 getters 中获取对应的属性，跟解构类似。具体如下图  
> ![在这里插入图片描述][20190604104356464.png]  
> 这样我们就可以将 getters 中的 evenOrOdd 属性值传给对应组件中的 evenOrOdd 上。Getters 接受 state 作为其第一个参数，Getters 也可以接受其他 getters 作为第二个参数。

**3、Mutations**

> mutations 与事件类似，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。所以 mutations  
> 上存放的一般就是我们要改变 state 的一些方法。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 3]
> 
> 我们不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：  
> **store.commit(‘increment’)**

> 当 mutation 事件类型比较多的时候，我们可以使用常量替代 mutation  
> 事件类型。同时把这些常量放在单独的文件中可以让我们的代码合作者对整个 app 包含的 mutation 一目了然：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 4]  
> 一条重要的原则就是要记住 mutation 必须是同步函数。

**4、Actions**

> 前面说了，mutation 像事件注册，需要相应的触发条件。而 Action 就那个管理触发条件的。  
> Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action  
> 可以包含任意异步操作。  
> ![在这里插入图片描述][20190604105856457.png]

> Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit  
> 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和  
> getters。 实践中，我们会经常会用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：  
> ![在这里插入图片描述][20190604110004314.png]

> 还记得我们前面说过 mutation 像事件类型吗？因此需要我们给定某个动作来进行触发。而这就是分发 action。Action 通过store.dispatch 方法触发：store.dispatch(‘increment’)

> 此外，我们还可以在我们可以在 action 内部执行异步操作：  
> ![在这里插入图片描述][20190604110059936.png]

> 你在组件中使用 this.$store.dispatch(‘xxx’) 分发 action，或者使用 mapActions 辅助函数将组件的  
> methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 5]

> 这句话意思其实是，当你使用了 mapActions， 你就不需要再次使用  
> this.$store.dispatch(‘xxx’)，当你没使用的话，你可以需要手动去分法。比如下面的代码：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 6]

> 本文章是借鉴于vuex官网和该博主的好文，把两者个人觉得不错的地方加了些自己的理解结合记录在CSDN上方便学习阅读，不便之处请联系我删除  
> vuex官网：[https://vuex.vuejs.org/zh/][https_vuex.vuejs.org_zh]  
> 原作者文章：[https://www.cnblogs.com/libin-1/p/6518902.html][https_www.cnblogs.com_libin-1_p_6518902.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70]: /images/20210812/72dbb9bf946449e8ac362c726d3d615f.png
[20190604110423397.png]: /images/20210812/d9f6bccd50dd4325a50e6e4055184b99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 1]: /images/20210812/5fa43223b6f64e4f95c30bfba734e5aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 2]: /images/20210812/91a168e0d6c047abbfb0823cf1574f29.png
[20190604104356464.png]: /images/20210812/ff515c5930fa4cf0a127a6b806863d27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 3]: /images/20210812/e1371e0175854a81b69ba997292a97b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 4]: /images/20210812/04d486d0c4184bb2a0d45b2cb88c0929.png
[20190604105856457.png]: /images/20210812/b81d562e9ade420ab70b532c52b3500e.png
[20190604110004314.png]: /images/20210812/405f235b02a949279afe0173a16fe3c9.png
[20190604110059936.png]: /images/20210812/496919a1edd4428ebd2d2c3610dbbb84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 5]: /images/20210812/8edb40fd03024b4d9b1ce3301df8048b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 6]: /images/20210812/f56653222dec4906bf4e828cabc428df.png
[https_vuex.vuejs.org_zh]: https://vuex.vuejs.org/zh/
[https_www.cnblogs.com_libin-1_p_6518902.html]: https://www.cnblogs.com/libin-1/p/6518902.html