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

vuex缓存所有字典项

背景

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

vuex管理所有字典项

  1. 新建src\store\modules\dict.js文件
  2. dict.js完整代码
bash 复制代码
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
bash 复制代码
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

bash 复制代码
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. 关键代码
bash 复制代码
// 获取用户接口下的代码
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完整代码
bash 复制代码
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. 将过滤方法注册到全局
bash 复制代码
import dict from "./filters/dict";
// 注册所有过滤方法
for (let key in dict) {
  Vue.filter(key, dict[key]);
}

页面中使用字典

  1. table中使用
bash 复制代码
<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-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="tableAction('update', record.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="tipClick"
            >删除</el-button
          >
        </template>
  1. 表单组件select和radio使用
bash 复制代码
<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-group
                v-if="item.type === 'radio'"
                v-model="formModel[item.name]"
                :disabled="item.disabled || !isUpdate"
                @input="radioChange"
              >
                <el-radio
                  v-for="list in optionDicts(item)"
                  :key="list.value || list.dictValue"
                  :label="list.value || list.dictValue"
                >
                  {{ list.label }}
                </el-radio>
              </el-radio-group>
              <!-- select选择器 -->
              <el-select
                size="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-option
                  v-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", 
        },
      ]
	}
}
相关推荐
寒雒30 分钟前
【Python】实战:实现GUI登录界面
开发语言·前端·python
独上归州36 分钟前
Vue与React的Suspense组件对比
前端·vue.js·react.js·suspense
战族狼魂42 分钟前
html+js实现图片的放大缩小等比缩放翻转,自动播放切换,顺逆时针旋转
javascript·css·html
Komorebi⁼44 分钟前
Vue核心特性解析(内含实践项目:设置购物车)
前端·javascript·vue.js·html·html5
明月清风徐徐44 分钟前
Vue实训---0-完成Vue开发环境的搭建
前端·javascript·vue.js
SameX1 小时前
HarmonyOS Next 企业数据传输安全策略
前端·harmonyos
daopuyun1 小时前
LoadRunner小贴士|开发Web-HTTP/HTML协议HTML5相关视频应用测试脚本的方法
前端·http·html
李先静1 小时前
AWTK-WEB 快速入门(1) - C 语言应用程序
c语言·开发语言·前端
MR·Feng1 小时前
使用Electron将vue2项目打包为桌面exe安装包
前端·javascript·electron
萧大侠jdeps1 小时前
图片生成视频-右进
前端·javascript·音视频