无痛轻松上手字典项使用

2023-01-12 12:46:09

全面剖析 Vue 字典项：从创建到展示，全攻略！

在 Vue 开发中，字典项发挥着至关重要的作用，它可以将数据项分类、规范和标准化，从而简化数据管理和增强应用程序的可读性。本篇博客将深入探究 Vue 字典项的使用，涵盖以下方面：

创建字典项

字典项一般由后端提供，可以通过接口获取。为了演示，我们提供一个示例接口：

{
  "code": 200,
  "data": [
    {
      "id": 1,
      "name": "男",
      "value": "1"
    },
    {
      "id": 2,
      "name": "女",
      "value": "2"
    }
  ]
}

字典项请求

使用 Axios 等 HTTP 客户端库进行字典项请求：

import axios from 'axios'

export const getDictItems = (dictCode) => {
  return axios({
    url: '/dict/items',
    method: 'get',
    params: {
      dictCode
    }
  })
}

字典项数据缓存

为了提升性能，可以考虑在前端缓存字典项数据：

import { ref } from 'vue'

const dictItemsCache = ref({})

export const useDictItems = (dictCode) => {
  if (dictItemsCache[dictCode]) {
    return dictItemsCache[dictCode]
  } else {
    const dictItems = getDictItems(dictCode)
    dictItemsCache[dictCode] = dictItems
    return dictItems
  }
}

字典项数据展示

获取字典项数据后，即可在页面上展示：

<template>
  <select v-model="selectedValue">
    <option v-for="item in dictItems" :key="item.id" :value="item.value">{{ item.name }}</option>
  </select>
</template>

<script>
import { useDictItems } from '@/utils/dict'

export default {
  setup() {
    const dictItems = useDictItems('sex')
    return {
      dictItems,
      selectedValue: ''
    }
  }
}
</script>