vue3项目中优雅的在vuex中异步获取字典类型数据

需求：在大型项目中字典管理尤为重要，字典数据往往在多个页面都能用到。当然，也可能有用不到的时候，所以前端菜鸟的我，敏锐的发现了我现阶段获取字典数据的问题，也百度了几篇文章，发现并不符合我的需求，看了一下其他作者的思路，最终以这种方式实现。话不多说上代码：

以前：

页面A：使用字典A =》请求字典A 

//挂载之前
proxy.$http({
  url: `/api/options`,
})
.then((data: any) => {
  state.option = data.data;
});

页面B：使用字典A =》请求字典A

页面B重复步骤，这样的写法，如果就两个页面用到还好，如果页面A,B,C,D,F都用的话，每次打开都要请求一次，万一每个页面都包含同样的字典，那对于前端字典管理无疑是一种灾难。

通过vuex改良：

//VUEX中
getters: {Option: state => state.Option},
state: {Option},
mutations: {
SET_OPTION(state, data) {
    state.OPTION = data
   },
},
actions: {
getOption({ commit }) {
      return new Promise((resolve, reject) => {
        http({
          url: '/api/options'
        }).then((data: any) => {
          commit('SET_OPTION', data.data)
          resolve(data.data)
        }).catch((err) => {
          reject(err)
        })
      })
   }
}

 创建一个js文件方便管理整个项目的字典

import store from '../store';//引入vuex
//Option.js
export const getOption = async function () {
  if (store.getters.Option.length > 0) {
    return store.getters.option;
  } else {
    await store.dispatch('getOption');
    return store.getters.Option;
  }
};

页面A,B,C,D,E.........中：

import { getOption } from "Option.js"
//挂载之前
state.option =await getOption()

由于vuex的getters中无法异步获取数据，所以在actions中再次使用pormise封装了一层请求，在Option.js中封装一下获取字典的逻辑，抛出方便在项目中使用。

这样字典如果没有请求，就会调用接口拿到数据，之后会保存在vuex，再次使用时就不会再请求一遍接口，直到刷新页面。如果需要永久保存也可以在set数据时把字典存入本地缓存。