vuex全局状态管理，单向数据流

一、基本介绍

vuex是一个专为vue.js的SPA但也组件化应用程序开发的状态管理模式插件。

由于vue SPA的应用的模块化，每个组件都有它各自的数据(state)、界面(view)、和方法(actions)。这些数据、界面和方法分布在各个组件中，当项目内用变得越来越多时，每个组件中的状态会变得很难管理。这时vuex就派上用场了

1.单个组件中的状态

假如值时在单个逐渐中要改变界面view很简单，之需要改变state数据源即可。如下代码：

单个组件

所以，单个组件中的原理图是这样的：

单个组件的原理图

2.多个组件中的状态

然而，我们作为组件化SPA应用，必定会牵扯到多个组件间的通信。

比如有两个相同的组件A和B，他们共享一个数据count，并且都有一个方法可以操作这个count，我们使用vuex来写。

A组件和B组件的代码(代码相同)

多个组件

可以看到这里的两个increment按钮点击都会同时改变两个count的数据，因为数据源count和方法increment都是全局的。

正如下图官方原理图所画的，我们把全局数据源state、改变数据源的方法mutations、异步操作方法actions都放提取出来放到store中，实现全局数据状态单独管理的功能。

vuex官方原理图

二、安装和配置

1.安装vuex

使用npm安装并保存到package.json中：

安装

package.json

2.配置

配置方式和路由的配置方式差不多

配置方式