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'
        })
    }
})