本文基本上是官方的盗版，用通俗易懂的文字讲解Vuex。学习一个新技术，必须要清楚两个W，"What 和Why"。当你了解了Vuex的优势，才会研究how。

Vuex是什么？

    Vuex 类似 Redux 的状态管理器，vuex是一个专门为vue.js设计的集中式状态管理架构，用来管理Vue的所有组件状态。我认为就是前端为了方便数据的操作而建立的一个“前端数据库”。

为什么使用Vuex？

    当你打算开发大型单页应用，会出现多个视图组件依赖同一个状态，来自不同视图的行为需要变更同一个状态。遇到以上情况时候，你就应该考虑使用Vuex了，它能把组件的共享状态抽取出来，当做一个全局单例模式进行管理。这样不管你在何处改变状态，都会通知使用该状态的组件做出相应修改。

    简单点，且听下文分解。模块间是不共享作用域的，那么B模块要拿到A模块的数据，抛开什么状态管理什么Vuex，我们会想到全局变量这个东东，且命为store吧，A模块共享的数据作为属性挂到B模块上，共享数据且名为state。B模块拿到A模块的数据不会一尘不变的，A要操作这个数据，那么要在数据state改变的时候告知B模块，那写个自定义事件。其实Vuex大致如此。

如何使用？

    既然说Vuex类似一个“前端数据库”，我们就聊聊数据库的操作。首先，数据库你得能取数据吧？那么得有一套取数据的 API，既然是获取，那就叫getter 吧。我们还得存数据，存数据就是对数据库的修改，这些 API，就叫mutation。Vuex生成的仓库也就这么出来了。State 就是数据库。Mutations 就是我们把数据存入数据库的 API，用来修改state 的。getters 是我们从数据库里取数据的 API。后端从前端拿到了数据，总要做个处理吧，处理完了再存到数据库中。其实这就是action的过程。然后我们把这几部分用store 包一下，” vuex “就捣置出来了。

     vuex基本使用流程为: 在action中分发异步请求, 在异步回调中提交mutation,在mutation中修改state, 使用getters对state的值进行计算封装.。

 项目引入 Vuex 的方式如下：

    在根实例中注册 store 选项，这样该 store 实例会注入到根组件下的所有子组件中，方便后面我们在每个子组件中调用 store 中 state 里存储的数据。

    为了能够很好的隔离页面view视图与数据的请求, 同时在使用vuex的action分发异步请求后,能够接收回调,进行了以下封装:

一. http的封装

http模块包含3个文件,config.js,http.js,api.js

config.js 封装网关域名,及所有接口的方法名

http.js 封装axios基本的get, post请求

api.js 封装接口名及对应的传输字段,回调响应数据

二. vuex模块的封装

vuex通过action异步请求,为了回调执行状态

1. view层需要渲染的数据

异步请求后,需要提交mutation,修改state,使用getters计算

2. 执行某个功能动作,

异步请求后,不需要提交mutation,不需要使用state中的数据

在页面调用如下:

   mapGetters，重点是mapGetters写在了哪儿。写在了 computed里面，这说明虽然getter我们写的是函数，但是我们应该把它当成计算属性来用,action放在了 methods 里面，说明我们应该把它当成函数来用。