若依移动端获取字典

前言

发现网上有的教程没有使用若依封装好的方法获取字典值，就写了这篇帖子，让大家更方便、高效地使用若依开发😁。

其实若依已经封装了很多方法，如：请求、文件上传、消息框…

这里不再赘述

环境

我使用 vue3 移动端进行演示，web 也可以使用，vue2 的话要使用选项式 API

若依移动端使用的是 uniapp，通过分析源码，可以知道若依已经写好了获取字典的相关 API 和 util，并全局挂载在 globalProperties

其他版本若依也都编写了相应的 API 和 util，并挂载到全局

使用方法

useDict 详解

若依已经在 /utils/dict.js 封装好了获取字典的方法，所以直接使用即可

查看代码，可知若依编写的 useDict 方法在第一次调用时：

1. 首先返回一个包含空数组的响应式对象 res.value。
2. 再通过 getDicts 这个异步请求方法获得数据，获取到数据后将数据保存到 res.value 对象和 useDictStore 仓库。

后期如果调用 useDict 方法，会直接返回 useDictStore 仓库的数据

逻辑层(script)中使用

避雷

因为若依封装的方法第一次只会返回包含空数组的响应式对象 res.value（见 useDict 详解），所以如果直接在 script 解析获取到的字典对象，会得不到我们想要的数据。

注：

直接解析只能在第一次请求之后才能获取到数据。

必须重新刷新页面才会重新发送请求（模拟第一次获取数据）。直接修改代码保存，可能会使用缓存数据，会造成数据获取成功的假象。

<script setup>
	import { useDict } from '@/utils/dict'
	import { toRefs } from 'vue'
	
	const { sys_job_group } = useDict('sys_job_group')
	console.log('dictData: ', sys_job_group.value)
</script>

正确方法

通过 watch 监听响应式对象，当对象值更新后，就可以获取到我们想要的字典值了

vue2 同理使用 watch 监听响应式对象

<script setup>
	import { useDict } from '@/utils/dict'
	import { watch } from 'vue'
	
	const { sys_job_group } = useDict('sys_job_group')
	
	// 监听 sys_job_group.value 的变化
	watch(
        () => sys_job_group.value,
        (newValue) => {
        	console.log('sys_job_group:', newValue)
        },
        { deep: true, immediate: true } // 深度监听，并立即执行（因为第二次调用 useDict 不会触发更新）
	);
</script>

模板(template)中使用

Vue 模板中会自动解包 ref，所以不需要 .value，直接可以使用（响应式对象更新，页面也会重新渲染）

<template>
	<div>{{ sys_job_group }}</div>
	<uni-section title="字典" type="line">
		<!-- 用 .map 将 sys_job_group 数组中对象的键 label 改为 text -->
		<uni-data-select
			:localdata="sys_job_group.map(({ label, ...rest }) => ({text: label,...rest}))"
			:clear="false"
		/>
	</uni-section>
</template>

<script setup>
	import { useDict } from '@/utils/dict'
	
	const { sys_job_group } = useDict('sys_job_group')
</script>

全局方法

其实若依已经将字典方法进行了全局挂载，在 web 端中使用全局方法也可以实现相同的功能

<script setup>
    const { proxy } = getCurrentInstance()
    const { sys_yes_no } = proxy.useDict("sys_job_group")
</script>

但是在移动端 uniapp 中需要从 vue 导入 getCurrentInstance，比较麻烦

<script setup>
	import { getCurrentInstance } from 'vue'
	
    const { proxy } = getCurrentInstance()
    const { sys_yes_no } = proxy.useDict("sys_job_group")
</script>