2021-09-07 字典数据vuex

前言：为了减少发送请求次数，字典数据统一放入到vuex管理

vuex封装字典管理

// dict.js
// 请求字典的封装方法
import { getDicts } from "@/api/system/dict/data";

const getDefaultState = () => {
  return {
// 存储格式
//{
//  approveState:[{DataValue:1,DataText:'待审批'},{DataValue:2,DataText:'审批中'}],
//  enableState:[{DataValue:1,DataText:'可用'},{DataValue:2,DataText:'禁用'}],
//  ...
//}
    // 字典map 
    dictMap: {}
  }
}

const state = getDefaultState()

const mutations = {
  // 保存字典项
  SAVE_DICT_ITEM: (state, data) => {
    let obj = {}
    obj[data.dictKey] = data
    // 需要拷贝一份，要不然数据变动监听不到
    state.dictMap = Object.assign({}, state.dictMap, obj)
  }
}

const actions = {
  // 获取字典的action
  getByDictKey({ commit }, data) {
    if(!data.dictKey) return
    return new Promise((resolve, reject) => {
      if (state.dictMap[data.dictKey]) {
        resolve()
      } else {
        // 根据字典类型请求后台数据
        getDicts(data.dictKey).then((res) => {
          commit('SAVE_DICT_ITEM', {
            dictKey: data.dictKey,
            items: res.Data
          })
          resolve()
        })
      }
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

//getter获取字典map
const getters = {
  subName: state => state.user.subName,
  dictMap: state => state.dict.dictMap
}
export default getters

select下拉框使用

import { mapGetters } from 'vuex'
created() {
     // 初始化数据，根据字典类型请求后台，获取下拉框列表
    if (!this.dictMap['sys_normal_disable']) {
      this.$store.dispatch('dict/getByDictKey', {
        dictKey: 'sys_normal_disable'
      })
    }
  },
computed: {
    ...mapGetters([
      'dictMap'
    ]),
    statusOptions(){  // getter获取下拉列表
      return this.dictMap['sys_normal_disable'] && this.dictMap['sys_normal_disable'].items
    }
  },
// 页面下拉框使用
<el-select
          v-model="queryParams.Search.Status"
          placeholder="角色状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.DataValue"
            :label="dict.DataText"
            :value="dict.DataValue"
          />
        </el-select>

通过字典key显示对应的文字，封装全局组件DictTag.vue

<template>
  <div>
    <slot v-bind:dict="dict">
      <span v-for="item in dict.items" :key="item.DataValue">
        <template v-if="istag=='no'">
          <span v-if="item.DataValue == value">{{ item.DataText }}</span>
        </template>
        <template v-else>
          <el-tag :type="item.ListClass == 'primary' ? '' : item.ListClass" size="small" v-if="item.DataValue == value">{{ item.DataText }}</el-tag>
        </template>
      </span>
    </slot>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: "DictTag",
  props: {
    // 字典唯一编码(表名_字段名)
    dictKey: {
      type: String,
      default: undefined
    },
    value: [String,Number, Array],
    istag:{
      type:String,
      default:'yes'
    }
  },
  created() {
    if (!this.dictMap[this.dictKey]) {
      this.$store.dispatch('dict/getByDictKey', {
        dictKey: this.dictKey,
        type: this.type
      })
    }
  },
  computed: {
    ...mapGetters([
      'dictMap'
    ]),
    // 当前字典
    dict() {
      return this.dictMap[this.dictKey] || {}
    }
  },
};
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>

//main.js 注册全局组件
import DictTag from '@/components/DictTag'
Vue.component('DictTag', DictTag)

// 页面使用，传递参数（值，字典类型）
<dict-tag v-model="scope.row.ApprovalStatus" dict-key="applyStatus"></dict-tag>

el.png

// 纯文本显示，配置istag
<dict-tag v-model="item.BadType" dict-key="quality_mrb_MrbBadType" istag="no"/>

wenziC.png