Vuex的基本使用及总结(超详细)

一、什么是Vuex

官网：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

通俗的来说，vuex是用于当某一状态需要在多个组件中共享，方便我们使用并追踪这些状态时使用。

二、Vuex的基本结构

1、安装vuex，创建store文件夹并新建index.js文件，写入：

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {},getters: {},mutations: {},actions: {},modules: {}
})export default store

2、在main.js中导入，并挂载到Vue实例当中去

三、State详解

1、Vuex采用的是单一状态树模式(SSOT，simple source of truth)，这个意味着在vuex中有且仅有一个实例，所有的数据都集中一个实例中，方便我们访问。
2、如果我们在state中定义一个counter，那么在多个组件中均可访问到这个counter

state: {counter:1000
},//在组件中访问
computed:{count() {return this.$store.state.counter}
},

四、Getter详解

1、Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

state: {students:[{id: 1,name: 'wsh',score: 98},{id: 2,name: 'yj',score: 97},{id: 3,name: 'lisi',score: 87},{id: 4,name: 'zhangs',score: 89}]
},
getters: {goodStu(state){return state.students.filter(item => item.score>=90)}
},

2、Getter 会暴露为 store.getters 对象，我们可以通过属性的形式访问这些值：

//获取得分大于等于90的学生
<p>{{$store.getters.goodStu}}</p>

3、Getter 也可以接受其他 getter 作为第二个参数：

//获取得分大于等于90的学生的个数
getters: {goodStu(state){return state.students.filter(item => item.score>=90)},goodStuNum(state,getters){return getters.goodStu.length}
},

<p>{{$store.getters.goodStuNum}}</p>

4、给 Getter 传参，例如获取得分高于参数 score 的学生

moreScore(state){return function(score){return state.students.filter(item => item.score>=score)}
}

//分数大于等于88的学生
<p>{{$store.getters.moreScore(88)}}</p>

五、Mutation详解

1、更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

mutations: {increment(state){state.counter++},decrement(state){state.counter--}
},

2、调用store.commit方法来唤醒这个回调函数

methods:{add(){this.$store.commit('increment')},sub(){this.$store.commit('decrement')}
}

2、我们可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload），在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

//mutations中
addStu(state,payload){state.students.push(payload)
}

//methods中
addStu(){this.$store.commit('addStu',{id: 5,name: 'kobe',score: 95})
}

3、提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

//其中amount通过payload.amount取出
store.commit({type: 'increment',amount: 10
})

4、Mutation 需遵守 Vue 的响应规则： ①最好提前在你的 store 中初始化好所有所需属性。 ②当需要在对象上添加新属性时，我们应该使用 Vue.set (state.obj, ‘newProp’, 123) 。③当需要在对象上删除某属性时，我们同样不能直接使用delete方法，而是应该使用 Vue.delete (state.obj,‘oldProp’) 。

5、使用常量替代 Mutation 事件类型。在多人协助的大型项目中会很有帮助，可自行学习。

六、Action详解

1、首先，action主要是用于进行一些异步操作的，因为如果在mutation中进行异步操作会导致无法跟踪的问题，所以所有的异步操作都建议放到action当中去执行，但是需要注意，只要我们需要修改状态，那么都必须通过mutation。

//Action函数接受一个与 store 实例具有相同方法和属性的 context 对象
actions: {updateInfo(context){setTimeout(() => {context.commit('changeInfo')},2000)}
},
//在mutations中
changeInfo(state){state.kobe.age = 99
}
//在methods中，通过store.dispatch方法来触发Action函数
change(){this.$store.dispatch('updateInfo')
}

2、action同样支持payload载荷来传入参数

change(){this.$store.dispatch('updateInfo',{})
}

3、如果我们想知道何时结束这个异步操作，我们可以返回一个Promise：

actions: {updateInfo(context){return new Promise((resolve,reject) => {setTimeout(() => {context.commit('changeInfo')resolve("some message")},2000)})}
},

change(){this.$store.dispatch('updateInfo').then(res => {console.log(res);})
}

七、Module详解

1、由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {state:{birthday: 1999},getters:{fullBirth(state){return state.birthday + "01"},fullBirth1(state,getters){return getters.fullBirth + "10"},fullBirth2(state,getters,rootState){return getters.fullBirth1 + rootState.blessing}},mutations:{changeBirth(state,payload){state.birthday = "2000"}},actions:{updateBirth(context){setTimeout(() => {context.commit('changeBirth',{})},1000)}}
}//在store实例中
modules: {a: moduleA
}

2、state ：通过store.state.a可以直接获取a模块的状态，这是因为a会被放入到store实例的state当中去：

<h2>{{$store.state.a.birthday}}</h2>

3、getter：子模块中的getters可以拥有第三个参数rootState用于获取根状态，使用如下

<h2>{{$store.getters.fullBirth}}</h2>
<h2>{{$store.getters.fullBirth1}}</h2>
<h2>{{$store.getters.fullBirth2}}</h2>

4、mutation：同样是通过store.commit提交：

this.$store.commit('changeBirth')

5、action：同样通过store.dispatch提交：

this.$store.dispatch('updateBirth')

八、总结

以上就是vuex的五大核心模块，还有一些细节可能并不完善，大家可以去官网进一步学习，如有错误欢迎大家指正。
官网指路