一、State单一状态树
(1)引例：
在我们的生活中有很多的信息需要被记录，比如上学时的个人档案，从小学到大学每个阶段都有信息记录，如果这些信息被分散到很多地方进行管理，有一天你需要办理某个业务时，你会发现你需要到各个对应的工作地点去打印盖章等各种资料信息，最后到一个地方提交你的消息无误的证明。这种保存信息的方式，不仅低效且难以管理。
(2)对比应用开发：
如果你的状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难。所以Vuex也使用了单一状态树来管理应用层级的全部状态。单一状态树((单一数据源)在一个项目里面只有一个store)能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。
(3)用法：
在state中保存已经定义好的属性×××，这些属性都会被加入到响应式系统中，而响应式系统会监听属性的变化，当属性发生变化时，会通知所有界面中用到改属性的地方，让界面发生更新。在各个组件中可以通过 this.$store.state.×××进行访问
(4)小结
state中存储数据，存储状态；在根实例中注册了store 后，用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。
二、Getters基本使用
(1)作用：
从 store 中获取一些 state 变化后的状态,经过变化之后再给组件使用，类似于计算属性computed
(2)用法：
1、基本使用
const store = new Vuex.Store({
state:{
students:[
{id:110,name:'xiaoming',age:18},
{id:111,name:'xiaohong',age:24},
{id:112,name:'xiaoqiang',age:30},
{id:113,name:'xiaohai',age:10}
],
},
}获取学生年龄大于20的学生
getters:{
more20stu(state) {
return state.students.filter(s => s.age > 20)
}
}在组件中：
$store.getters.more20stu2、getters作为参数
getters:{
more20stu(state) {
return state.students.filter(s => s.age > 20)
},
more20stuLength(state,getters) {
return getters.more20stu.length
},
}在组件中：
$store.getters.more20stuLength3、getters传递参数
getters:{
moreAgestu(state) {
return age => state.students.filter(s => s.age > age)
}
}在组件中：
$store.getters.moreAgestu(12)getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数。
如上面案例中，我们希望可以获取年龄超过12的学生信息。
三、Mutations
(1)作用：
如果我们想要修改state状态，最好通过mutations修改，因为如果是多个界面都修改state的时候我们不好区分，希望进行跟踪。而在mutations中进行修改，这样Devtools( Vue开发的一个浏览器插件 可以记录每次修改State的状态)才会进行记录，才能跟踪每一步修改的状态，调错的时候就更加方便。注意：mutations中通常做同步操作，异步操作跟踪不到。
(2)用法：
1、mutations状态更新
mutations:{
increment(state) {
state.counter++
}
}通过mutations进行更新
increment() {
// 通过 commit 进行相关的提交
this.$store.commit('increment')
}2、mutations传递参数
mutations:{
increment(state,n) {
state.counter++
}
}传递一个参数
this.$store.commit('increment',2)如果有很多参数进行传递，我们会以对象的形式进行传递(payload)
mutations:{
increment(state,payload) {
state.counter += payload.count
}
}也就是payload是一个对象，可以从对象中取出相关信息
普通的提交风格：
increment(){
this.$store.commit('increment',{count:2})
}特殊的提交风格：
this.$store.commit({
type:'increment',
count
})四、Actions
(1)作用：
前面强调, 不要在mutations中进行异步操作,但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的。这个时候怎么处理呢?Action类似于Mutation, 但是是用来代替Mutation进行异步操作的。
(2)用法：
如果是异步操作想要修改state，需要先在actions中先执行完异步操作后再提交到mutations中进行修改
const store = new Vuex.store({
state:{
count:0
},
mutations:{
increment(state){
state.count++
}
},
actions:{
increment(context){
context.commit('increment')
}
}
})context是和store对象具有相同方法和属性的对象。也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等,但是注意, 这里它们并不是同一个对象。
在Vue组件中，如果我们想要调用actions中的方法，那么就需要使用dispatch进行提交
Vue组件中：
methods:{
increment(){
this.$store.dispatch('increment',{count:5})
}
}store对象中：
mutations:{
increment(state,payload){
state.count += payload.count
}
},
actions:{
increment(context,payload){
setTimeout(() => {
context.commit('increment',payload)
},1000)
}
}在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject
actions:{
increment(context) {
return new Promise(resolve => {
setTimeout(() => {
context.commit('increment')
resolve()
},1000)
})
}
}methods:{
increment(){
this.$store.dispatch('increment').then(res => {
console.log('完成了更新操作')
})
}
}五、Module
(1)作用：
Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理。当应用变得非常复杂时,store对象就有可能变得相当臃肿。为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等。
(2)用法：
const moduleA = {
state:{
name:'malong'
},
mutations:{
updateName(state,payload) {
state.name = payload
}
},
actions:{
aUpdateName(context) {
setTimeout(() => {
console.log(context);
context.commit('updateName','xuxin')
},1000)
}
},
getters:{
fullname(state) {
return state.name + '111'
},
fullname2 (state,getters) {
return getters.fullname + '222'
},
// rootState 下面根的 state
fullname3(state,getters,rootState) {
return getters.fullname2 + rootState.counter
}
}
}
const store = new Vuex.Store({
state:{
},
mutations:{
},
actions:{
},
getters:{
},
modules:{
// 这里的a会被放到state中
a: moduleA
}
})
