vue全局枚举值缓存

场景：项目中的枚举值，通常来说是不会变，那么每次请求接口获取枚举值就有点浪费时间了。

措施：全局请求一次，将所有的枚举值放入缓存。

技术栈：localStorage + vuex + vueRouter

大致实现说明：

1. vuex中的action中先判断缓存中是否存在枚举值。
2. 若不存在，异步获取所有枚举值接口，并放入缓存，设置vuex中state的枚举值。
3. 若存在，从缓存中获取枚举值，并设置vuex中state的枚举值。
4. 在getters中写全局获取具体某个code的枚举值。
5. 在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') || {}
      if (Object.keys(enumObj).length) {
        // 缓存有值，则从缓存取，并设置state
        commit('setEnumAll', enumObj)
      } else {
        // 否则，从接口获取
        getDicts().then(res => {
          let obj = {}

          res.forEach(item => {
            let objValue = item.map(({ value, label }) => ({
              value,
              label
            }))
            
            // 以对象的形式存储（code为key, 枚举值为value）
            obj[item.name] = objValue
          })

          // 放入缓存
          ls.set('enumAll', obj)
          // 设置state
          commit('setEnumAll', obj)
        })
      }
    }
  }
}

步骤二：vuex中的getters方法

const getters = {
  getEnum: state => code => state.enum.enumAll[code] || []
}
export default getters;

说明：getters方法传参，传入枚举值code码，返回响应的枚举值。

注意：注意下getters接受参数的方式，返回的是一个方法，该方法参数即为getters的接受参数。

步骤三：在vue-Router中的beforeEach中调用

import router from './routers'
import store from '@/store'

router.beforeEach((to, from, next) => {
  if (getToken()) { 
    // 存在token
    // 已登录且要跳转的页面是登录页
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      // 跳转非登录页
      // 缓存数据
      store.dispatch('enum/asyncGetEnumAll')
  } else {
     ...没token处理
  }
})