开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第26天，点击查看活动详情
前言
在github上vue的Star数量已经超过了react，可以看到vue深受喜爱，vue这么火的原因除了响应式数据和优秀的社区之外就属vue-router和vuex贡献最大了，vue-router在前面的文章就介绍过了，那vuex又是什么呢？
官方介绍vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，简而言之就是Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据名得按照Vuex提供的方式来修改
vuex的结构示意图如下:
vuex核心模块
从上图就可以看出vuex的核心模块有5个：
- state：单一状态树，类似Opctions API中的data
- getters：状态获取，类似Opctions API中的计算属性
- mutations：触发同步事件，类似Opctions API中的methods
- actions：提交mutation，可以包含异步操作
- module：将vuex分成模块
vuex的安装导入
vuex的安装可以在使用脚手架创建项目的时候添加，也可以通过命令npm install vuex --save安装， 然后新建store文件夹和index.js作为入口，并在main.js中导入并挂载到Vue实例上
import store from './store'
new Vue({
store,
render: h => h(App)
}).$mount('#app')
然后在index里配置
//基本配置
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
state:{
},
mutations:{
},
actions:{
},
getters:{
},
modules:{
}
})
export defaule store
vuex的使用
state
在每个 Vue 组件中，可以通过 this.$store.state.数据名称来访问store的数据，在模板{{}}中则可以去掉this
state:{
count:100
},
<template>
<div>
<div>count:{{$store.state.count}}</div>
</div>
</template>
mutations
mutations专门用来变更store 中的数据，想要修改State 中的数据，只能调用Mutation 方法，它是Vuex中用来修改公共数据的唯一入口，有两个参数，一个是默认传入一个state，对应上面的state对象，另一个是要传入的数据，是可选的
//组件
addFive(){ //例如vuex添加一个方法，每次调用state里的count就+5，调用时通过this.$store.commit('mutation名'， 载荷) 来调用
this.$store.commit('addFive',5)
},
//vuex的mutations
mutations:{ //没次调用就+5，不过mutations必须是同步函数，里面不能放异步代码
addFive(state,count){
state.count+=count
},
}
actions
actions有点类似mutations，但是actions是用于处理异步任务的，比如网络请求等，如果有异步操作必须通过actions而不是mutations，但在actions中还是要通过触发mutations的方式
actions也有两个参数，context和携带的参数，context是和store对象具有相同方法和属性的对象，可以通过context进行commit相关操作，可以获取context.state数据
addFive(){
// this.$store.commit('addFive',5)
this.$store.dispatch('ActionsAddFive', 5) //dispatch函数 专门用于触发 Action
}
actions:{
ActionsAddFive(context,count){
setTimeout(() => {//模拟异步操作
context.commit('addFive',count)
}, 2000);
},
}
modules
modules是模块的意思,当很多状态都交给vuex管理，vuex就会变得非常复杂，臃肿，我们可以将store分割成模块，每个模块都有自己的state，mutations，actions，getters
const moduleA={
state:{},
mutations:{},
getters:{},
actions:{}
}
const moduleB={
state:{},
mutations:{},
getters:{},
actions:{}
}
const store=new Vuex.Store({
modules:{
a:moduleA,
b:moduleB
}
})
