下班前几分钟，我学会了如何使用 Vuex

目录

前言

正文

一、基本概念

二、项目场景

三、如何使用

1、安装

2、State 初始值

3、Getters 修饰值

4、Mutations 修改值

5、Actions 异步修改值

四、总结

五、建议

何时使用 Vuex ？

---

前言

本人曾对 Vuex 作过详细介绍，但是今天去回顾的时候发现文章思路有些繁琐，不容易找到重点。于是，在下班前几分钟，我对其重新梳理了一遍。

tips：本文的案例均为Vue2版本。

正文

一、基本概念

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

二、项目场景

如果你的项目里有很多页面（组件/视图），页面之间存在多级的嵌套关系，此时，如果这些页面都需要共享一个状态的时候，此时就会产生以下两个问题：

• 多个视图依赖同一个状态

• 来自不同视图的行为需要变更同一个状态

解决方案（初版）：

• 对于第一个问题，假如是多级嵌套关系，你可以使用父子组件传参进行解决，虽有些麻烦，但好在可以解决；对于兄弟组件或者关系更复杂组件之间，虽然可以通过各种各样的办法解决，可实在很不优雅，而且等项目做大了，代码量愈发巨大，实在令人心烦。

• 对于第二个问题，你可以通过父子组件直接引用，或者通过事件来变更或者同步状态的多份拷贝，但是这种模式很脆弱，使得代码难以维护，而且同样会让代码量剧增。

思路：

• 把各个组件都需要依赖的同一个状态抽取出来，全局统一管理。

• 在这种模式下，任何组件都可以直接访问到这个状态，或者当状态发生改变时，所有的组件都相应更新。

此时，Vuex 就诞生了。这就是它背后的基本思想，借鉴了 Flux、Redux。与其他模式不同的是，Vuex 是专门为 Vue 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

三、如何使用

1、安装