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的学生
{{$store.getters.goodStu}}
` 3、Getter 也可以接受其他 getter 作为第二个参数： `//获取得分大于等于90的学生的个数 getters: { goodStu(state){ return state.students.filter(item => item.score>=90) }, goodStuNum(state,getters){ return getters.goodStu.length } },{{$store.getters.goodStuNum}}
` 4、给 Getter 传参，例如获取得分高于参数 score 的学生 `moreScore(state){ return function(score){ return state.students.filter(item => item.score>=score) } } //分数大于等于88的学生{{$store.getters.moreScore(88)}}
` 五、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、state ：通过store.state.a可以直接获取a模块的状态，这是因为a会被放入到store实例的state当中去：
<h2>{{$store.state.a.birthday}}</h2>
3、getter：子模块中的getters可以拥有第三个参数rootState用于获取根状态，使用如下
`
浙公网安备 33010602011771号