美文网首页
2021-09-07 字典数据vuex

2021-09-07 字典数据vuex

作者: jinya2437 | 来源:发表于2021-09-07 08:53 被阅读0次

前言:为了减少发送请求次数,字典数据统一放入到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

相关文章

  • 2021-09-07 字典数据vuex

    前言:为了减少发送请求次数,字典数据统一放入到vuex管理 vuex封装字典管理 select下拉框使用 通过字典...

  • 模块化vuex,获取、设置数据,及刷新保留数据方法

    前言 1.模块化vuex2.获取vuex中的数据3.设置vuex中的数据4.刷新之后,保留数据 模块化vuex 数...

  • 在vuex里怎么更改数据?

    获取数据: vuex中$store.state是可以获取vuex仓库的数据,vuex仓库的数据是共享的,不管是顶级...

  • 2021-09-07

    2021-09-07

  • vuex

    Vuex介绍: Vuex官网:http://vuex.vuejs.org/ Vuex是实现数据状态管理的技...

  • vuex 使用教程

    vuex简介 vuex相当于一个浏览器的一个本地存储,不过vuex拥有更复杂的操作,vuex包含了数据定义,数据过...

  • Vuex

    Vuex简介: 由于使用propes传递数据太麻烦,所以使用vuex进行状态管理。不能直接修改vuex中的数据,只...

  • vue的一些基础知识

    vuex 不要为了用vuex而用vuex。vuex 是全局状态管理,类似于数据库 把握住了一些数据的状态。那什么样...

  • Vuex

    Vuex Vuex:用于管理数据的工具(对象),读写数据 初始化 在组件中使用Vuex 鉴于以上操作较复杂,vue...

  • 2021-09-07 11点问题集

    2021-09-07 11点

网友评论

      本文标题:2021-09-07 字典数据vuex

      本文链接:https://www.haomeiwen.com/subject/mheuwltx.html