Vue的StateManagement(状态管理):Vuex，我们在构建大型应用程序时对StateManagement的处理非常重要。

一、Vuex简介。

由于业务的增长，应用程序也变得越来越复杂，每个组件都有自己的数据状态，加上各组件之间的数据传递问题，一个数据的变化会影响到多个组件的连锁反应，这就增加了定位的难度。
所以要解决上面的问题，我们就要对数据进行集中管理，在多个组件共享数据状态——比如用户的登录信息或者UI组件的呈现状态(按钮禁用或载入数据)。

幸好，StateManagement并不需要手动操作，很多流行的框架可以帮助我们管理数据状态，您可能听说过Redux，它是React生态圈中较为流行的状态管理解决方案。Vue当然也有自己的官方解决方案，称为Vuex。它们的共同点是帮助我们集中管理数据状态，以及所有不需要的父子关系的组件，并且可以轻松地在数据间进行交互。

二、vuex的五个属性

那么如何使用Vuex呢？用之前，我们先看一下下面的图，这张图很好地解释了Vuex的工作原理，理解了这张图，你就可以很快上手使用Vuex了。
要了解Vuex，必须理解以下概念：

State

完整的应用数据中心，应用的相关组件获取数据或更新数据，是整个应用程序的唯一数据中心。
 

Store

只有外部组件不能直接对State进行更改，数据中心管理员只能依靠dispatchaction(行为调度)或commitamutation(提交mutation)间接操作。

Getters

Getters的本质在于Vuexstore的computed属性，读取store/state的内容，Getters中的数据将被缓存，并且在数据更新时它所依赖的相关组件状态也会及时更新。

Mutations

当在应用程序中共享全局数据状态时，由于数据变化可能来自任何组件，因此难以定位和跟踪数据的状态。
所以Vuex建议用Mutations的方式改变数据，而不是直接进行修改，它的Vuedevtools工具非常精确地帮助我查找更改和修改的时间。
如果您使用过Redux,Mutations的概念与reducer非常相似，它的作用是改变数据状态。

Actions

当要执行一个异步任务或多个相关Mutations来更新数据状态时，我们需要Actions定义用于操作的函数，其中的第一个参数context可以获得相关属性，commit和getters，从而便于组织定义更复杂的逻辑。Actions是我们常用的接口数据请求获取数据，Actions经常被使用。

以Store/State为结束，我们使用了Store/State来定义和管理应用的核心数据，通过Compute属性在组件中调用来自Getters的数据，如果我们要操纵数据，我们可以调用注册的Actions方法，然后Actions调用相关的mutations来对数据操作。

三、Vuex的使用方法

下面我们自己来做一个简单的练习，通过代码进一步了解Vuex，废话不多说，我们开始吧！

1.安装Vuex。

假定我们通过CLI工具创建一个Vue项目(使用缺省预设)，如果我们要使用Vuex来安装相关依赖项，安装命令如下：
npminstallvuex。

依赖性安装完成之后，需要注册Vuex实例，然后在src目录中新建一个store.js，示例代码如下：

src/store.js。
importVuefrom"vue";importVuexfrom"vuex"vuex"vuex"vuex"vuex"vuex"vuex"vuex"vuex"vuex:{state:{},mutations:{}，活动：{}})；
将一个包含state、mutations和actions这些核心属性传递到Vuex.store构造函数中的对象，不必担心，我们将逐步实现，接下来我们打开main.js文件，在Vue实例中进行注册，示例代码如下：

src/main.js。
importVuefrom"vue";importAppfrom"./App.vue";importstorefrom"./store";Vue.config.productionTip=false;newVue({store,render:h=>h(App)}).$mount("#app")；
在以上步骤完成之后，我们可以通过this.$store轻松地访问store实例的内容。

2、初始化状态中的数据。

State本身是一个JS对象，创建的数据可以在不同的组件中共享，例如，初始化购物车的数据，示例代码如下：

exportdefaultnewVuex.Store({state:{customerName:'JohnSmith',shoppingCart:[{name:'JumboBoxofTeabags',quantity:1,price:350},{name:'PacketofFancyBiscuits',quantity:1,price:199},]}；

status属性的值可以包含任意有效的数据类型，接下来我们可以使用computed在组件中获取数据，例如，我们要获得客户的名字，示例代码如下：

上面的代码是通过store实例获取数据的，您可能会觉得这样获取有些冗长，Vuex提供了一种工具函数来方便地获取store实例的数据。

对于mapState方法，示例代码如下：

mapState()方法使用了新的ES6语法..，帮助我们从State获得数据，您只需传递函数中对应的State属性值，这就很简单了。

3、获取Getters中的数据。

Getters的本质就是Vuexstore的computed属性，它允许您在不同组件之间共享数据状态，正如组件的computed属性一样，其中的数据将被缓存，当数据发生变化时，进行动态计算，并实时反馈。
例如，我们要获得购物车中商品的种类，样本代码如下：

exportdefaultnewVuex.Store({state:{shoppingCart:[//...]},getters:{cartItemCount:state=>state.shoppingCart.length}})；

使用组件中的getter方法获得store/state，我们需要创建用于调用的computed属性，示例代码如下：

而Vuex提供了一种更方便的mapGetters()方法。