使用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内取出数据，还不会重复请求获取数据字典接口。