前言
我们在开发vue项目时经常会用到vuex，所有我觉得有必要介绍一下vuex的安装和使用，vuex也算是全家桶里面比较重要的一部分，可以帮助我们更高效的完成开发任务。
一、关于vuex
VueX是适用于在Vue项目开发时使用的状态管理工具。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。
VueX和单纯的全局对象有以下两点不同：
- VueX的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store
中的状态发生变化，那么相应的组件也会相应地得到高效更新。 - 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit)
mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
使用时需要安装：npm i vuex -s
安装完成后会在根目录下生成一个文件夹store，并创建index.js
二、使用vuex
初始化store下index.js中的内容
import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex.Store({
state:{
name:'helloVueX'
}，
mutations：{
}
})
export default store
打开main.js，将vuex进行引用
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' //引用store
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, //store:将我们创建的Vuex实例挂载到这个vue实例中
components: {
App },
template: '<App/>'
})
在组件中使用Vuex，我们获取state中定义的name（注意：使用时不能直接更改state中的状态值）
this.$store.state.name
三、VueX中的核心内容
vuex中，有默认的五种基本的对象：
state：存储状态（变量）
mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似
modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样
actions：异步操作。在组件中使用是$store.dispath('')
getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()的
State
主要用来存储状态或变量。如果在组件中，想要访问store中的数据，只能通过 this.$store.state.name（根据自己定义名称写）来访问
Mutations
mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。
1、使用方法
我们想把下列state中的name值从"helloVueX"修改为"jack",我们只需要这样写：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
name:'helloVueX'
},
mutations:{
//es6语法，等同edit:funcion(){...}
edit(state){
state.name = 'jack'
},
test(state,values){
state.name = '张三'
console.log(values) // 15或{age:15,sex:'男'}
}
},
actions: {
},
getters: {
}
})
export default store
1、在组件中，我们想调用mutations中的方法，需要这样写：
this.$store.commit('edit')
2、在组件中，我们想调用mutations中的方法修改state中的值，需要这样写
this.$store.commit('edit',"张三");
3、在组件中，当需要多参提交时需要这样写：
//第一种
this.$store.commit('test',{
age:15,sex:'男'})
//第二种
this.$store.commit({
type:'test',
values:{
age:15,
sex:'男'
}
})
3、增删state中的成员
为了配合Vue的响应式数据，我们在Mutations的方法中，应当使用Vue提供的方法来进行操作。如果使用delete或者xx.xx = xx的形式去删或增，则Vue不能对数据进行实时响应。
Vue.set 为某个对象设置成员的值，若不存在则新增。例如对state对象中添加一个age成员，值为15。
Vue.set(state,"age",15)
Vue.delete 删除成员，将刚刚添加的age成员删除。
Vue.delete(state,'age')
Getters
可以对state中的成员加工后传递给外界。
Getters中的方法有两个默认参数：
- state 当前VueX对象中的状态对象
- getters 当前getters对象，用于将getters下的其他getter拿来用
getters:{
nameInfo(state){
return "姓名:"+state.name
},
fullInfo(state,getters){
return getters.nameInfo+'年龄:'+state.age
}
}
组件中调用
this.$store.getters.fullInfo
Actions
由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。
Actions中的方法有两个默认参数
- context 上下文(相当于箭头函数中的this)对象
- payload 挂载参数
例如，我们在两秒中后执行edit方法，由于setTimeout是异步操作，所以需要使用actions
actions:{
aEdit(context,payload){
setTimeout(()=>{
context.commit('edit',payload)
},2000)
}
}
在组件中调用：
this.$store.dispatch('aEdit',{
age:15})
Models
当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
models:{
a:{
state:{
},
getters:{
},
....
}
}
组件内调用模块a的状态：
this.$store.state.a
而提交或者dispatch某个方法和以前一样,会自动执行所有模块内的对应type的方法：
this.$store.commit('editKey')
this.$store.dispatch('aEditKey')
四、结束语
vuex虽然用过一段时间，但也不是所有的属性都用到了，我最常用的就是state和mutations，后面做的项目多了其他属性肯定也会用到。个人比较推荐的是在做vue项目时，最好下一个vue调试的插件（Vue Devtools），可以帮助我们更好的调试。