当前位置: 首页 > news >正文

vue中避免多次请求字典接口

vuex缓存所有字典项

  • 背景
  • vuex管理所有字典项
  • 调用字典接口
  • 处理字典项数据的filter
  • 页面中使用字典

背景

每次用到字典都需要通过对应的字典type调用一次字典接口,当一个页面用到字典项很多时,接口请求炒鸡多,会导致接口响应超时。
本篇文章改为调用接口将所有字典项请求回存到vuex中,需要时通过过滤数据的方式解决这一问题。

vuex管理所有字典项

  1. 新建src\store\modules\dict.js文件
  2. dict.js完整代码
const state = {// 存储所有字典项allDict: new Array(),
};const mutations = {SET_ALL_DICT: (state, data) => {state.allDict = data;},CLEAN_ALL_DICT: (state) => {state.allDict = new Array();},
};const actions = {setAllDict({ commit }, data) {commit("SET_ALL_DICT", data);},cleanAllDict({ commit }) {commit("CLEAN_ALL_DICT");},
};export default {state,mutations,actions,
};
  1. 在src\store\index.js中引入dict.js
import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app";
import user from "./modules/user";
import tagsView from "./modules/tagsView";
import permission from "./modules/permission";
import settings from "./modules/settings";
import getters from "./getters";
import businessDictAll from "./modules/businessDictAll"; //引入Vue.use(Vuex);const store = new Vuex.Store({modules: {app,user,tagsView,permission,settings,businessDictAll,},getters,
});export default store;

4.src\store\getter.js中添加allDict

const getters = {sidebar: state => state.app.sidebar,size: state => state.app.size,device: state => state.app.device,dict: state => state.dict.dict,visitedViews: state => state.tagsView.visitedViews,cachedViews: state => state.tagsView.cachedViews,token: state => state.user.token,avatar: state => state.user.avatar,name: state => state.user.name,introduction: state => state.user.introduction,roles: state => state.user.roles,permissions: state => state.user.permissions,permission_routes: state => state.permission.routes,topbarRouters:state => state.permission.topbarRouters,defaultRoutes:state => state.permission.defaultRoutes,sidebarRouters:state => state.permission.sidebarRouters,allDict: state => state.businessDictAll.allDict, //所有字典项
}
export default getters

调用字典接口

我这块在src\store\modules\user.js中的的getInfo后调用的字典接口并存储字典数据,我放这的目的是当页面刷新会调用getInfo,调用成功后更新字典数据(也可以放到登录成功后,这种情况如果想要刷新字典数据,只能退出重新登录)。

  1. 关键代码
// 获取用户接口下的代码
let queryParams = {pageNum: 1,pageSize: 100000, //这块完全是因为后端不想再开接口,用的之前分页的接口,所以传了巨大个值
};
listData(queryParams).then((response) => {let dictData = response.rows;store.commit("SET_ALL_DICT", dictData);
});

处理字典项数据的filter

  1. src\filters\dict.js完整代码
import store from "@/store";const allDict = {// 处理select这类表单项数据// 如果有字典名dictName则过滤字典,若没有取当前表单项的option属性(这块是通过接口返回的数据字段)dictOption: function (formItem) {if (formItem.dictName) {let type = formItem.dictName;let dictList = [];if (type && typeof type === "string") {const dicts = store.getters && store.getters.allDict;dictList = dicts.filter((item) => item.dictType === type);} else {console.error(`字典获取失败`);}return dictList;} else {return formItem.option;}},// table中根据dictValue字段匹配对应dictLabel值dictAll: function (value, type) {let dictList = [];let foundItem = {};if (type && typeof type === "string") {const dicts = store.getters && store.getters.allDict;dictList = dicts.filter((item) => item.dictType === type);foundItem = dictList.find((item) => item.dictValue === value);} else {console.error(`字典获取失败`);}//如果过滤到了就返回dictLabel,// 否则判断当前是否有返回数据,如果有返回的数据,直接将数据返回// 否则接口没返回数据给table显示'-'(可根据需要去处理,我这块是因为table中数据为空要显示-)return foundItem ? foundItem.dictLabel : value ? value : "-";},
};export default allDict;
  1. 将过滤方法注册到全局
import dict from "./filters/dict";
// 注册所有过滤方法
for (let key in dict) {Vue.filter(key, dict[key]);
}

页面中使用字典

  1. table中使用
<baseTable:columns="columns":loading="loading":tableData="tableData":total="total":queryParams="queryParams":tableH="tableH"@getList="getList"><template #modeCode="record"><!-- 调用filter方法,record.row.modeCode为当前接口返回值,dictAll为全局过滤方法,mode_code为字典项名 --><span>{{ record.row.modeCode | dictAll("mode_code") }}</span></template><template #action="record"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="tableAction('update', record.row)">编辑</el-button><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="tipClick">删除</el-button></template>
  1. 表单组件select和radio使用
<template><div><el-form:model="formModel":rules="rules"ref="baseForm":label-width="'120px'"><el-row :gutter="gutter"><div v-for="(item, index) in formData" :key="index"><el-col :span="item.span || 8" v-if="!item.hidden"><el-form-item :label="item.label" :prop="item.name"><!-- 省略组件其他表单项(具体可查看组件那篇) --><!-- 单选框 --><el-radio-groupv-if="item.type === 'radio'"v-model="formModel[item.name]":disabled="item.disabled || !isUpdate"@input="radioChange"><el-radiov-for="list in optionDicts(item)":key="list.value || list.dictValue":label="list.value || list.dictValue">{{ list.label }}</el-radio></el-radio-group><!-- select选择器 --><el-selectsize="small"v-if="item.type === 'select'"filterable:disabled="item.disabled || !isUpdate"v-model="formModel[item.name]":placeholder="item.disabled ? '' : '请选择' + item.label":multiple="item.multiple"style="width: 100%"@change="change(item.name, formModel[item.name])"><el-optionv-for="list in optionDicts(item)":key="list.value || list.dictValue":label="list.label || list.dictLabel":value="list.value || list.dictValue"/></el-select><!-- 自定义 --><template v-if="item.type == 'slot'" #default><slot :name="item.name"></slot></template></el-form-item></el-col></div></el-row></el-form></div>
</template>methods: {optionDicts(item) {//通过this.$options.filters调用处理表单项的过滤方法return this.$options.filters["dictOption"](item); }
}// 下面是给表单组件的栗子数据
data() {return {formItems: [{label: "XXX模式",type: "select",key: "modeCode",placeholder: "请选择XXX模式",dictName: "mode_code", },]}
}

相关文章:

vue中避免多次请求字典接口

vuex缓存所有字典项 背景vuex管理所有字典项调用字典接口处理字典项数据的filter页面中使用字典 背景 每次用到字典都需要通过对应的字典type调用一次字典接口&#xff0c;当一个页面用到字典项很多时&#xff0c;接口请求炒鸡多&#xff0c;会导致接口响应超时。 本篇文章改为…...

Snappy使用

Snappy使用 Snappy是谷歌开源的压缩和解压的开发包&#xff0c;目标在于实现高速的压缩而不是最大的压缩 项目地址&#xff1a;GitHub - google/snappy&#xff1a;快速压缩器/解压缩器 Cmake版本升级 该项目需要比较新的cmake&#xff0c;CMake 3.16.3 or higher is requi…...

跨越重洋:在Heroku上配置Pip镜像源的终极指南

&#x1f310; 跨越重洋&#xff1a;在Heroku上配置Pip镜像源的终极指南 Heroku是一个支持多种编程语言的云平台即服务&#xff08;PaaS&#xff09;&#xff0c;它允许开发者部署和管理应用程序。然而&#xff0c;由于Heroku的服务器位于海外&#xff0c;直接使用Python的包管…...

SpringBoot + 虚拟线程,性能炸裂!

一、什么是虚拟线程 虚拟线程是Java19开始增加的一个特性&#xff0c;和Golang的携程类似&#xff0c;一个其它语言早就提供的、且如此实用且好用的功能&#xff0c;作为一个Java开发者&#xff0c;早就已经望眼欲穿了。 二、虚拟线程和普通线程的区别 “虚拟”线程&#xf…...

Java Character类

Character是char的包装类 转义序列 Character类的方法...

Python中的爬虫实战:猫眼电影爬虫

随着互联网技术的快速发展&#xff0c;网络上的信息量越来越庞大。猫眼电影作为国内领先的电影数据平台&#xff0c;为用户提供了全面的电影信息服务。本文将介绍如何利用python编写简单的猫眼电影爬虫&#xff0c;获取电影相关数据。 爬虫概述 爬虫&#xff0c;即网络爬虫&a…...

WAIC2024 | 华院计算邀您共赴2024年世界人工智能大会,见证未来科技革新

在智能时代的浪潮汹涌澎湃之际&#xff0c;算法已成为推动社会进步的核心力量。作为中国认知智能技术的领军企业&#xff0c;华院计算在人工智能的广阔天地中&#xff0c;不断探索、创新&#xff0c;致力于将算法的潜力发挥到极致。在过去的时日里&#xff0c;华院计算不断探索…...

数据库原理之数据库基本概念

目录 前言 基本概念 数据库完整性 前言 今天我们来看看数据库的基本概念&#xff0c;帮助大家对数据库有一点点最基本的了解 基本概念 4个基本概念 数据data&#xff1a;描述事物的符号&#xff0c;数据库中存储的基本对象。 数据库Database&#xff1a;长期存储在计算机…...

vue2项目的打包以及部署

打包 当我们写好vue2的项目后&#xff0c;可以通过npm build来对项目进行打包 npm build 打包完成后我们可以看到在当面目录下生成了dis目录,src下的文件都会被打包进这个目录里&#xff0c;当然打包后的文件我们不能直接在浏览器打开&#xff0c;需要进行部署 部署 1.新建一个…...

Java的全局异常处理代码

第一步&#xff1a;先写一个异常管理类: package com.example.firefighting.exceptions;import com.example.firefighting.utils.Result; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.web.bind.annotation.RestControllerA…...

Hi3861 OpenHarmony嵌入式应用入门--LiteOS semaphore作为锁

CMSIS 2.0 接口中的 Semaphore&#xff08;信号量&#xff09;是用于嵌入式系统中多线程或中断服务例程&#xff08;ISR&#xff09;之间同步和共享资源保护的重要机制。Semaphore 是一种用于控制对多个共享资源访问的同步机制。它可以被看作是一个计数器&#xff0c;用于跟踪可…...

注意!年龄越大,社交圈子越窄?其实这是老人的理性选择!数学家告诉你:何时该跳槽,何时该坚守!你必须知道的三个智慧:让你的人生更加精彩!

我们到底应该在什么情况下探索新事物&#xff0c;什么情况下专注于已有的东西呢&#xff1f;本质上来说&#xff0c;这个问题就是在询问&#xff0c;你究竟应该耗费精力去探索新的信息&#xff0c;还是专注从既有的信息中获取收获&#xff1f; 有人采访了临终的老人&#xff0c…...

[SwiftUI 开发] 嵌套的ObservedObject中的更改不会更新UI

1. 发生问题的demo 业务逻辑代码 class Address: ObservableObject {Published var street "123 Apple Street"Published var city "Cupertino" }class User: ObservableObject {Published var name "Tim Cook"Published var address Addr…...

全面了解机器学习

目录 一、基本认识 1. 介绍 2. 机器学习位置 二、机器学习的类型 1. 监督学习 2. 无监督学习 3. 强化学习 三、机器学习术语 1. 训练样本 2. 训练 3. 特征 4. 目标 5. 损失函数 四、机器学习流程 五、机器学习算法 1. 分类算法 2. 聚类算法 3. 关联分析 4. …...

作为图形渲染API,OpenGL和Direct3D的全方位对比。

当你在网页看到很多美轮美奂的图形效果&#xff0c;3D交互效果&#xff0c;你知道是如何实现的吗&#xff1f;当然是借助图形渲染API了&#xff0c;说起这个不就不得说两大阵营&#xff0c;OpenGL和Direct3D&#xff0c;贝格前端工场在本文对二者做个详细对比。 一、什么是图形…...

安装Rabbitmq遇到的坑

&#xff01;&#xff01;&#xff01;一定要对号版本号 不同的虚拟机unbontu、cetenos和不同的erlang和不同的rabbitmq之间要对应下载对应版本 下面给出我的版本centos7erlangrabbitmq 分割线 安装好后&#xff0c;如果在虚拟机的服务器上可以打开&#xff0c;在本地浏览器…...

React+TS 从零开始教程(4):useEffect

上一节传送门&#xff1a;ReactTS 从零开始教程&#xff08;3&#xff09;&#xff1a;useState 源码链接&#xff1a;https://pan.quark.cn/s/c6fbc31dcb02 上一节&#xff0c;我们已经学会了React的第一个Hook&#xff1a;useState。 这一节&#xff0c;我们要学习的是另一…...

网络安全学习路线图(2024版详解)

近期&#xff0c;大家在网上对于网络安全讨论比较多&#xff0c;想要学习的人也不少&#xff0c;但是需要学习哪些内容&#xff0c;按照什么顺序去学习呢&#xff1f;其实我们已经出国多版本的网络安全学习路线图&#xff0c;一直以来效果也比较不错&#xff0c;本次我们针对市…...

你了解人工智能吗?

前言 人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是计算机科学的一个重要分支&#xff0c;致力于开发能够执行通常需要人类智能的任务的系统。本文将从历史发展、关键技术、应用领域以及未来挑战等方面&#xff0c;深入探讨人工智能的相关内容。 …...

如何使用Vue.js实现动态文档生成与下载功能

在现代Web应用开发中&#xff0c;用户往往需要在浏览器端完成复杂的操作&#xff0c;如生成和下载特定格式的文档&#xff0c;而无需服务器直接干预。本文将以一个Vue.js应用程序为例&#xff0c;详细介绍如何利用axios&#xff08;或自定义请求模块&#xff09;结合FileReader…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...

医疗AI模型可解释性编程研究:基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践,在这一过程中,模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法(如RandomForest、XGBoost、LightGBM)因其卓越的预测性能和相对良好的解释性…...

数据分析六部曲?

引言 上一章我们说到了数据分析六部曲&#xff0c;何谓六部曲呢&#xff1f; 其实啊&#xff0c;数据分析没那么难&#xff0c;只要掌握了下面这六个步骤&#xff0c;也就是数据分析六部曲&#xff0c;就算你是个啥都不懂的小白&#xff0c;也能慢慢上手做数据分析啦。 第一…...