vue设置全局枚举

简介：提交表单时经常用到枚举，获取数据类表时也要用枚举分解状态

思路：

1、请求后台接口获取枚举，保存进localStorage和vueX，每次进入时从localStorage获取枚举保存进vueX，不用反复请求

2、从Store获取枚举设置方法分解枚举，通常用于表格状态

3、利用mixin把枚举混入全局实例，这样可以在全局使用枚举

实现：

1、获取枚举

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    enum: {},//全局枚举 从后台获取
  },
  getters: {
    getEnumData(state) {
      return state.enum
    },
  },
  mutations: {//获取枚举列表
    getEnum(state, data) {
      state.enum = data
    },
  },
})

2、全局设置分解方法和枚举

import Vue from 'vue'
import store from '@/store'
import { mapGetters } from 'vuex'
//全局过滤选择器的枚举
function mapLabel(value, key) {
    // 显示公共enumLabel
    const data = store.state.enum
    if (key && data[key]) {
        return (
            data[key].find((e) => e.value === value) || {
                label: value,
            }
        ).label
    } else return 'no enum'
}
Vue.filter('mapLabel', mapLabel)
//全局获取枚举对象
Vue.mixin({
    computed: {
        ...mapGetters({
            '$enum': 'getEnumData'
        })
    }
})