Vue3中使用usePermission获取麦克风权限时value为undefined的解决方法

问题原因 #

你遇到的情况是因为usePermission返回的是一个异步解析的Ref对象：

• 控制台打印mic时显示内部value为'granted'，是因为控制台是惰性求值的——你展开RefImpl的时候，异步的权限请求已经完成，value已经被赋值；
• 但代码中同步访问mic.value时，权限请求还在处理中，所以拿到的是初始的undefined。

正确获取权限状态的方法 #

1. 用watch监听状态变化（推荐）

通过监听Ref的变化，在状态更新后再处理逻辑：

<script setup>
import { usePermission, watch } from 'vue'

const mic = usePermission('microphone')

// 监听权限状态变化
watch(mic, (newStatus) => {
  console.log('麦克风权限状态:', newStatus)
  // 这里写权限相关的业务逻辑，比如根据granted/denied做不同处理
}, { immediate: true }) // 加上immediate会立即执行一次监听回调
</script>

2. 在模板中直接使用

Vue模板会自动解包Ref，所以可以直接在模板里引用：

<template>
  <div>当前麦克风权限：{{ mic }}</div>
</template>

<script setup>
import { usePermission } from 'vue'
const mic = usePermission('microphone')
</script>

3. 异步等待状态就绪

如果需要在同步代码中获取，可通过异步等待确保状态已更新：

<script setup>
import { usePermission, nextTick } from 'vue'

const mic = usePermission('microphone')

async function checkPermission() {
  // 等待下一次DOM更新周期，确保Ref已完成赋值
  await nextTick()
  console.log('麦克风权限:', mic.value)
}

// 调用异步函数
checkPermission()
</script>

内容的提问来源于stack exchange，提问作者user2217288