做网站侵权,培训网站建设方案模板,网站制作公司 佛山,做门户网站用什么技术好vuex缓存所有字典项 背景vuex管理所有字典项调用字典接口处理字典项数据的filter页面中使用字典 背景 每次用到字典都需要通过对应的字典type调用一次字典接口#xff0c;当一个页面用到字典项很多时#xff0c;接口请求炒鸡多#xff0c;会导致接口响应超时。 本篇文章改为… vuex缓存所有字典项 背景vuex管理所有字典项调用字典接口处理字典项数据的filter页面中使用字典 背景 每次用到字典都需要通过对应的字典type调用一次字典接口当一个页面用到字典项很多时接口请求炒鸡多会导致接口响应超时。 本篇文章改为调用接口将所有字典项请求回存到vuex中需要时通过过滤数据的方式解决这一问题。 vuex管理所有字典项
新建src\store\modules\dict.js文件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,
};
在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调用成功后更新字典数据也可以放到登录成功后这种情况如果想要刷新字典数据只能退出重新登录。 关键代码
// 获取用户接口下的代码
let queryParams {pageNum: 1,pageSize: 100000, //这块完全是因为后端不想再开接口用的之前分页的接口所以传了巨大个值
};
listData(queryParams).then((response) {let dictData response.rows;store.commit(SET_ALL_DICT, dictData);
});处理字典项数据的filter
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;
将过滤方法注册到全局
import dict from ./filters/dict;
// 注册所有过滤方法
for (let key in dict) {Vue.filter(key, dict[key]);
}页面中使用字典
table中使用
baseTable:columnscolumns:loadingloading:tableDatatableData:totaltotal:queryParamsqueryParams:tableHtableHgetListgetListtemplate #modeCoderecord!-- 调用filter方法,record.row.modeCode为当前接口返回值,dictAll为全局过滤方法,mode_code为字典项名 --span{{ record.row.modeCode | dictAll(mode_code) }}/span/templatetemplate #actionrecordel-buttonsizeminitypetexticonel-icon-editclicktableAction(update, record.row)编辑/el-buttonel-buttonsizeminitypetexticonel-icon-deleteclicktipClick删除/el-button/template表单组件select和radio使用
templatedivel-form:modelformModel:rulesrulesrefbaseForm:label-width120pxel-row :guttergutterdiv v-for(item, index) in formData :keyindexel-col :spanitem.span || 8 v-if!item.hiddenel-form-item :labelitem.label :propitem.name!-- 省略组件其他表单项(具体可查看组件那篇) --!-- 单选框 --el-radio-groupv-ifitem.type radiov-modelformModel[item.name]:disableditem.disabled || !isUpdateinputradioChangeel-radiov-forlist in optionDicts(item):keylist.value || list.dictValue:labellist.value || list.dictValue{{ list.label }}/el-radio/el-radio-group!-- select选择器 --el-selectsizesmallv-ifitem.type selectfilterable:disableditem.disabled || !isUpdatev-modelformModel[item.name]:placeholderitem.disabled ? : 请选择 item.label:multipleitem.multiplestylewidth: 100%changechange(item.name, formModel[item.name])el-optionv-forlist in optionDicts(item):keylist.value || list.dictValue:labellist.label || list.dictLabel:valuelist.value || list.dictValue//el-select!-- 自定义 --template v-ifitem.type slot #defaultslot :nameitem.name/slot/template/el-form-item/el-col/div/el-row/el-form/div
/templatemethods: {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, },]}
}
