使用vuex对后台请求的数据来实现字典管理和使用

场景及问题:

在管理系统中,多个页面下拉框需要使用共同的字典库,字典从后端请求获取。但是单个组件都要请求一遍很麻烦,每一次加载页面都要重复请求,有些浪费资源。


问题解决

想到使用vuex来实现,有的时候就不再请求后台,没有的时候再请求后台并存到vuex内。

思路:数据字典放到json文件中,请求接口查字典,用于格式化数据。且每个字典对应请求参数放到一个list里面,请求的时候对应到需要的字典来使用。在查字典接口里,第一次会把请求数据缓存起来存入json数组,以便调用时,先从缓存里拿字典数据,如果缓存没有,才会发起请求。


实际解决:

在store文件夹内创建distData.json文件

{
    "cjzjList": [],
    "qqqqList": [],
    "ssssList": [],
    "eeeeList": [],
    "rrrrList": [],
}

在store文件夹内创建index.js文件

import Vue from "vue";
import Vuex from "vuex";
import dict from "./distData.json";
import { getOneTypeAll } from "@/api/common.js";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    options: dict,
    optionType: [
      {
        name: "cjzjList", // 常见证件类型
        id: 1,
      },
      {
        name: "qqqqList", // 类型2
        id: 2,
      },
      {
        name: "ssssList", // 类型3
        id: 3,
      },
      {
        name: "eeeeList", // 类型4
        id: 4,
      },
      {
        name: "rrrrList", // 类型5
        id: 5,
      },
    ],
  },
  getters: {},
  mutations: {
    setOptions(state, obj) {
      let { key, value } = obj;
      try {
        state.options[key] = value;
      } catch (error) {
        console.log(error);
      }
    },
  },
  actions: {
    getOptions(context, args) {
      return new Promise((resolve, reject) => {
        let optionType = context.state.optionType;
        let dict = context.state.options;
        let params = args.reduce((o, v, i) => {
          if (dict[v] && dict[v].length == 0) {
            o.push(v);
          }
          return o;
        }, []);
        if (params.length == 0) {
          resolve(true);
          return false;
        }
        params.forEach((items) => {
          optionType.forEach((item) => {
            if (item.name == items) {
              getOneTypeAll({
                zdlx: item.id,
              }).then((res) => {
                // params.map((v) => {
                context.commit("setOptions", {
                  key: items,
                  value: res.data || [],
                });
                // });
                resolve(true, res);
              });
            }
          });
        });
      });
    },
  },
  modules: {},
});

在需要获取数据字典的页面使用:

computed: {
    qqqqList() {
      return this.$store.state.options.qqqqList|| [];
    },
    cjzjList() {
      return this.$store.state.options.cjzjList || [];
    },
  },
  created() {
    this.$store
      .dispatch("getOptions", [ "cjzjList", "qqqqList"])
      .then((result) => {
        console.log(result);
      })
      .catch((err) => {
        console.log(err);
      });
  },

总结:

这样就可以简单的实现将后端请求的数据存入vuex中且从vuex内取出数据,还不会重复请求获取数据字典接口。

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值