本文介绍如何在Vue项目中实现全局枚举值的缓存和获取。通过localStorage结合vuex，在初始化时判断枚举值是否存在缓存，如果不存在则从接口获取并存储，使用vuex getters提供全局获取枚举值的方法。在vueRouter的beforeEach钩子中调用，确保每次路由切换时枚举值已加载。
场景：项目中的枚举值，通常来说是不会变，那么每次请求接口获取枚举值就有点浪费时间了。
措施：全局请求一次，将所有的枚举值放入缓存。
技术栈：localStorage + vuex + vueRouter
大致实现说明：
vuex中的action中先判断缓存中是否存在枚举值。
若不存在，异步获取所有枚举值接口，并放入缓存，设置vuex中state的枚举值。
若存在，从缓存中获取枚举值，并设置vuex中state的枚举值。
在getters中写全局获取具体某个code的枚举值。
在vueRouter中的beforeEach中调用。
步骤一：vuex modules的enum.js中
import { getDicts } from '@/api/system/dict'
export default {
namespaced: true,
state: {
enumAll: {}
},
mutations: {
// 设置所有枚举值
setEnumAll(state, value) {
state.enumAll = value
}
},
actions: {
// 异步获取所有枚举值
asyncGetEnumAll({ commit }) {
const enumObj = ls.get('enumAll') ||
最低0.47元/天 解锁文章
扫一扫
1976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
