import {
buildLoadingDictStruct, buildSucDictStruct, DICT_STATUS, needLoadDict} from '@/util/constants'
import {
DictService} from "@/service/DictService";
/**
* 字典数据结构
* @type {
{data: *[], status: string}}
*/
const dictDataStruct = {
// 字典加载状态, 根据这个状态来判断,是否需要发起ajax请求来拉取后端数据
status: DICT_STATUS.UNLOAD,
// 实际字典数据
data: []
}
/**
* 获取字典
* @param commit vuex的commit
* @param state vuex的state
* @param dictFieldName 字典在vuex的state属性名
* @param dictCode 字典编码
* @param dictMutationName 字典的mutation方法名
* @returns {Promise<void>}
*/
const dictAction = async (commit, state, dictFieldName, dictCode, dictMutationName) => {
// 判断是否需要发起ajax请求去拉取服务器数据
if (needLoadDict(state[dictFieldName].status)) {
// 将字典加载状态设置为加载中,避免重复请求
commit(dictMutationName, buildLoadingDictStruct())
// 加载字典数据
const data = await DictService.load(dictCode)
console.log(`加载${
dictCode}字典`, data)
// 设置字典加载状态为成功
const dictData = buildSucDictStruct(data)
commit(dictMutationName, dictData)
}
}
export const dict = {
namespaced: true,
state: ()
vuex actions避免重复执行async方法的逻辑的写法套路记载
最新推荐文章于 2022-09-09 22:11:12 发布
本文详细记录了在Vuex中如何设计Actions,以避免在组件多次触发时导致async方法的重复执行。通过状态管理,确保异步操作的幂等性,提高应用的稳定性和用户体验。
摘要由CSDN通过智能技术生成