Vuex

2018-09-20

要想使用Vuex，我们必须先要明白Vuex是用来干嘛的，这里是官方给出的一个解释：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
也就是说Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

Vuex组成

1、state 用来存储数据和数据共享
2、mutation 用来注册改变数据状态（不能进行异步操作）
3、getters 用来对共享数据进行过滤操作
4、action 解决异步改变共享数据

Tips

1、this.$store ：我们可以通过 this.$store 在vue的组件中获取
vuex的实例。

2、State ： vuex中的数据源，我们可以通过 this.$store.state 获取
我们在vuex中声明的全局变量的值。

3、Getter：相当于vue中的computed ，及计算属性，可以用于监听、
计算 state中的值的变化

4、Mutation： vuex中去操作数据的方法（只能同步执行）

5、Action：用来操作 Mutation 的动作，他不能直接去操作数据源，
但可以把mutation变为异步的

6、Module：模块化，当你的应用足够大的时候，你可以把你的vuex分成多个
子模块

Vuex的基本思想
Vuex

vue的视图都是由数据驱动的，也就是说状态(state)里面的数据是动态变化的，而要改变状态内数据的唯一的方法就是通过mutation!也就是说mutation内可以存放一些改变状态的逻辑方法！这也是Vuex设计的一个特点，处理数据的逻辑和视图进行分离！

在项目中的使用

首先我们新建一个文件夹用来存放vuex的所有文件
然后新建一个index.js文件，用来引用和声明vuex，这里我使用modules进行模块化的引入和管理，便于后期代码维护，我们
我们在代码中分别注册了，state、getters、mutations、actions。
Vuex
这样我们就可以在任何一个 component中通过 this.$store.dispatch(‘getArticle’, {id: this.$route.params.id})来进行操作
Vuex
然后是getters.js,Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Vuex

使用模块式引入不同页面的状态，可以方便后期的代码维护，以用户登录为例，我们建立user.js,然后通过mutation进行模块化管理，在user.js进行我们用户状态的管理。

Vuex
这里我们可以使用mapGetters将getter 映射到局部计算属性：
Vuex