VueX（vue 状态管理系统）

一、VueX 是什么？

          VueX是作用于vue.js 的项目开发所设计的状态管理程序，比如说在同时开发一个项目的时候，陆续的使用组件开始传递参数的时候，来同步data值。如果一旦项目庞大，维护与管理就成为了很棘手的任务，所以 Vue 在为了多个组件频繁传参中 使用的值，便提供了一个管理系统 VueX。所以在之后我们便可以把使用的值 定义 到 VueX中，便可以在 Vue中使用

二、如何安装 VueX？

       由于VueX是在学习 VueCli 后进行的，所以在下文出现的项目的目录请参照 VueCli 2.x 构建的目录。如果你已经 完成构建 Vue 的项目后，并且已转到该项目文件下，我们便可以安装了

Npm 安装 VueX  ：    npm  i vuex -s

安装完成之后是这样的:

三、怎样使用？

3.1  初始化 store 下创建 index.js 中的内容

          首先要先创建一个文件夹 名称为 store（注意  : 它是一个仓库）， 然后再该文件夹中创建一个新的文件名称为 index.js 之后便在文件中打入下面的内容

3.2  然后再将 store 挂载到 当前的 Vue 实例当中去

3.3  在组件中使用 VueX

例如我们在App.vue中，我们要将state中定义的n拿来在h2标签中显示

四 、VueX中的核心内容

         在VueX对象中，其实不止有state,还有用来操作state中数据的方法，以及当我们需要对state中的数据需要加工的方法等成员。

4.1 Vue 的工作流程图

链接图片
https://upload-images.jianshu.io/upload_images/16550832-20d0ad3c60a99111.png?imageMogr2/auto-orient/strip|imageView2/2/format/webp

首先，Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatchVueX中actions的方法，以保证数据的同步。可以说，action的存在就是为了让mutations中的方法能在异步操作中起作用。

如果没有异步操作，那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。注意，不建议在组件中直接对state中的成员进行操作，最后被修改后的state成员会被渲染到组件的原位置当中去。