一、Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension（链接：GitHub - vuejs/vue-devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.），提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

二、什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式（链接：状态管理 — Vue.js）就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

安装、使用Vuex

官网上有很详细、多种的安装方式，大家可以去看看（链接：安装 | Vuex）

首先我们在 vue.js 2.0 开发环境中安装 vuex :

npm install vuex --save

然后 , 在 main.js 中加入 :

再然后 , 在实例化 Vue对象时加入 store 对象 :

完成到这一步 , 上述例子中的 $store.state.show 就可以使用了。

在 Vue 的单页面应用中使用，需要使用Vue.use(Vuex)调用插件。将其注入到Vue根实例中。

然后改变状态：

this.$store.commit('increment')

三、Vuex的构成

由上图，我们可以看出Vuex有以下几个部分构成：

1）state

state是存储的单一状态，是存储的基本数据。

2）Getters

getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3）Mutations

mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）

4）Actions

actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）

5）Module

Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

四、详细介绍Vuex的几个核心内容

1、State

Vuex 使用 state 来存储应用中需要共享的状态。为了能让 Vue 组件在 state更改后也随着更改，需要基于state 创建计算属性。

2、Getter

类似于 Vue 中的 计算属性（可以认为是 store 的计算属性），getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 方法接受 state 作为其第一个参数：

3、Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。也就是说，前面两个都是状态值本身，mutations才是改变状态的执行者。

注意：mutations只能是同步地更改状态。

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

4、actions

多个 state 的操作 , 使用 mutations 会来触发会比较好维护 , 那么需要执行多个 mutations 就需要用 action 了:

官方推荐 , 将异步操作放在 action 中。

5.plugins

插件其实就是vuex的一些与设定的初始化时期运行的内容，所以我们可以知道plugins是一个函数内容，其中的第一个参数内容是store对象内容，方便插件对于store对象的调用。同时我们可以通过store之中的subscribe方法，这个方法注册了一个mutation的后置处理切面（感觉像是截胡）。此方法需要传递一个函数作为参数，这个函数之中有两个参数内容分别是mutation对象和state对象。其中mutation对象的格式是{type, payload}，state则是修改完成之后的state内容。

这样在vuex初始化的时候在控制台打印store的内容，然后在我们每次提交mutation的时候将会在控制台打印mutation和state的数据内容。编写好插件之后，我们可以通过在store的管理对象中添加plugins关键字，传递一个数组的方式来引用插件。

接下来我们说一说插件的几种巡查使用：

1.有的时候我们需要做改变前后的state的比对，我们可以通过插件来进行，简化代码如下：

通过存储state内容的快照信息，我们将可以比对内容变更，依据变更来实现部分逻辑。

2.经常我们需要存储号我们的vuex数据，因为vue的页面展示变更时不以页面刷新来进行的，如果用户习惯性的点击刷新按键，没有存储当前vuex之中的数据的时候会导致数据的重新初始化，这样将会严重的影响当前用户的使用体验的。这个时候数据缓存的工作实际上就可以交由plugin来做了，这里上一段简单的缓存代码：

这样我们就可以很完好的保存当前数据内容的形式了，方便之后用户的刷新和使用。

3.使用插件来进行日志的记录。数据展示的改变需要依据状态的改变，状态的改变需要通过mutation的操作，而mutation的操作之后就是我们记录日志的时候，所以也是常常使用的功能之一。当然我们的vuex已经有自带的createLogger日志插件了，如果你使用vue-devtool完全可以不用这一插件了。createLogger的使用可以查看一下vuex官网的相关部分（点击这里），这里我就不细说了。

当然上面提及的三种只是很少量的部分，我们可以使用的方式实际上还是有很多的，有待于每一个开发人员去发现和想象。

以上就是Vuex的简单入门