1、Vuex 是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
使用场景
在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。
Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——Vuex
当多个组件需要操作到同一个数据的时候可以使用
核心概念
Vuex 的核心概念由五部分组成: State (存放状态)、Getter (加工state成员给外界)、Mutation (state成员操作,必须是同步函数)、Action (异步操作)和 Module (模块化状态管理)。
目录
下面是我的文件目录,将state、actions、mutaions都抽出来
vue4.x版本,使用的是一个函数式创建vuex实例的方式
在indexjs文件中
import { createStore } from 'vuex'
// 在store/indexjs创建一个新的 store 实例
import { createStore } from 'vuex';
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import state from './state'
export default createStore({
state,
getters,
mutations,
actions
});
state
state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,
在组件中取
<template>
<div class="test">
{{ count }}
</div>
</template>
<script>
computed: {
count () {
return store.state.count
}
}
</script>
//* 每当 store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。
mapState 辅助函数
当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。
所以我们可以使用 mapState 辅助函数来帮助我们生成计算属性:
<script type="text/ecmascript-6">
import {mapState} from 'vuex' //mapState 函数返回的是一个对象。
export default {
name: "test",
data() {
return {
};
},
computed: {
...mapState(["count"]),
},
};
</script>
getter
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
在getterjs文件中
export default {
getCount(state,getters) { //getters 可以获取到getter中的方法 比如getCount
return state.count
}
}
//获取 this.$store.getters.getCount
或者也可以通过mapGetters 辅助函数来获取
1.对象取别名的方式
...mapGetters({
// 把 `this.getCount` 映射为 `this.$store.getters.getCount`
getCount1: 'getCount'
})
2.数组的方式
...mapGetters(['getCount'])
Mutation
是操作state数据的方法的集合,比如对该数据的修改、增加、删除
在mutationjs中调用
mutations: {
//这里是set方法
changeCount(state,num) {
// 变更count
state.count += num.value
}
},
在组件中调用
1. this.$store.commit('changeCount',10)
2. this.$store.commit({
type:'changeCount',
value: 10
})
Action
Action 类似于 mutation,不同在于:
- Action 提交,需要借助mutation变更状态。
- Action 可以包含任意异步操作。
在actionsjs中
changeCountAction(context,params) {
setTimeout(() => {
context.commit('changeCount',params.count)
}, 2000)
}
使用
// 以载荷形式分发
this.$store.dispatch("changeCountAction",
{
count: 18
});
},
// 以对象形式分发
this.$store.dispatch({
type: "changeCountAction",
count: 18,
});
一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行。
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}