uniapp数据字典

数据字典的实现方法

在UniApp中实现数据字典功能，可以通过以下几种方式：

全局挂载字典数据 将字典数据挂载到Vue原型上，方便全局调用

// main.js
Vue.prototype.$dict = {
  gender: [
    { label: '男', value: 1 },
    { label: '女', value: 2 }
  ]
}

使用Vuex管理字典 创建专门的字典模块进行集中管理

// store/modules/dict.js
export default {
  state: {
    gender: [
      { label: '男', value: 1 },
      { label: '女', value: 2 }
    ]
  },
  getters: {
    getDict: (state) => (key) => {
      return state[key] || []
    }
  }
}

本地存储字典数据 将字典数据缓存到本地存储中

uni.setStorageSync('dict_gender', [
  { label: '男', value: 1 },
  { label: '女', value: 2 }
])

字典数据的使用示例

模板中使用字典

<view v-for="item in $dict.gender" :key="item.value">
  {{item.label}}
</view>

脚本中使用字典

const genderOptions = this.$dict.gender
const selectedLabel = genderOptions.find(item => item.value === 1).label

从Vuex获取字典

computed: {
  genderOptions() {
    return this.$store.getters.getDict('gender')
  }
}

字典工具函数封装

创建字典工具类

// utils/dict.js
export default {
  // 获取字典标签
  getLabel(dictKey, value) {
    const dict = this.getDict(dictKey)
    const item = dict.find(item => item.value === value)
    return item ? item.label : ''
  },

  // 获取完整字典
  getDict(dictKey) {
    return uni.getStorageSync(`dict_${dictKey}`) || []
  }
}

使用字典工具

import dict from '@/utils/dict.js'
const label = dict.getLabel('gender', 1)

字典数据加载策略

应用启动时加载 在App.vue的onLaunch中加载基础字典

onLaunch() {
  this.loadBaseDicts()
},
methods: {
  async loadBaseDicts() {
    const res = await uni.request({ url: '/api/dict/base' })
    res.data.forEach(item => {
      uni.setStorageSync(`dict_${item.dictKey}`, item.dictData)
    })
  }
}

按需加载字典 在需要时动态加载字典数据

async loadDict(dictKey) {
  if (!uni.getStorageSync(`dict_${dictKey}`)) {
    const res = await uni.request({ url: `/api/dict/${dictKey}` })
    uni.setStorageSync(`dict_${dictKey}`, res.data)
  }
}

字典数据格式规范

推荐使用统一的字典数据结构：

{
  dictKey: 'gender',  // 字典键名
  dictData: [         // 字典数据
    { label: '男', value: 1 },
    { label: '女', value: 2 }
  ],
  remark: '性别字典'  // 字典说明
}

对于带翻译需求的字典，可扩展为：

{
  label: '男',
  value: 1,
  enLabel: 'Male',
  jpLabel: '男性'
}