Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
当我们接触vuex的时候，这是我们最先看到的一句官方引导。
从这句话中，我们可以得到如下几个信息：
1、vuex是一个为vue而存在的特化的Flux，如同数据库中的弱实体一样,离开了vue,vuex就用不了。反之可以看到redux就不存在，无论是vue还是react，redux都可以使用。所以这里体现的vuex的“特性”，redux则具备“普适性”
2、集中式的管理说明vue中所有的组件的状态都是存在于vuex中
3、使用vuex你就要遵循我的规则，这样组件中状态的变化我才能跟踪的到。
1.项目中vuex目录的搭建
上图是我在这篇文章中，vue整体项目骨架的局部。
vuex使用的是单一的状态树，我们的vue应用将仅仅包含一个 store 的实例。所以当我们将store挂载到vue的实例上以后，我们可以通过this.$store取到vuex里面的各个部分。
2.index.js
import vue from 'vue'
import vuex from 'vuex'
import mutations from './mutation'
import getters from './getter'
vue.use(vuex)
const state = {
isLoading:false
}
export default new vuex.Store({
state,
getters,
mutations
})
在index这个文件中，我们会去定义我们需要在vuex中存储的状态初始值。
比如说，我在上面的state对象中去存储了一个isLoading属性，该属性我准备用它来标识我请求backend API的时候显示，在请求完成后消失的这样一个loading的效果，来缓解一下用户的等待心理。
3.Mutation(mutation.js)
一般来说，我们在项目中最常用的就是mutation.js里面的方法了。因为更改vuex中的store里的state的唯一的方式就是提交mutation。
在vuex中，每个mutation都有一个字符串的事件类型(mutation-type)和一个回调函数(handler)。
这个回调函数可接受两个参数，第一个参数为state，第二参数是mutation的载荷(payload)。
//...
mutations: {
/**
* @method:只传入state,修改loading状态
* @param {bool} isLoading:loading状态
*/
changeLoading(state) {
state.isLoading = !state.isLoading
}
}
store.commit('changeLoading')
mutations: {
/**
* @method:传入state和payload,修改loading状态
* @param {bool} isLoading:loading状态
*/
changeLoading(state,payload) {
state.isLoading = payload.isLoading
}
}
store.commit('changeLoading',{isLoading: true})
还有一种提交mutation的方式是直接使用包含 type 属性的对象，不过我不是很推荐这样的方式，因为用上面的方式来处理的话，代码的易读性会更高。