vue3 vueUse 连接蓝牙

在Vue 3中使用vueUse库连接蓝牙，你可以利用useBluetooth这个Composition API。以下是一个简单的例子，展示了如何使用useBluetooth来扫描蓝牙设备和连接蓝牙设备。

首先，确保你已经安装了vueUse库：

npm install @vueuse/core

然后，在你的Vue组件中使用useBluetooth：

<template>
  <div>
    <button @click="scanDevices">扫描蓝牙设备</button>
    <div v-if="devices.length">
      <div v-for="device in devices" :key="device.id">
        {{ device.name }} - {{ device.id }}
        <button @click="connectDevice(device)">连接</button>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { useBluetooth } from '@vueuse/core';
 
const { devices, scan, connect, isScanning } = useBluetooth();
const connectedDevice = ref(null);
 
// 扫描蓝牙设备
async function scanDevices() {
  try {
    await scan();
  } catch (error) {
    console.error('扫描蓝牙设备时发生错误:', error);
  }
}
 
// 连接蓝牙设备
async function connectDevice(device) {
  try {
    connectedDevice.value = await connect(device);
    console.log('设备已连接:', connectedDevice.value);
  } catch (error) {
    console.error('连接蓝牙设备时发生错误:', error);
  }
}
</script>

在这个例子中，我们首先导入了useBluetooth，然后定义了devices来存储扫描到的蓝牙设备，scan函数用于开始扫描，connect函数用于连接蓝牙设备。isScanning可以用来检查是否正在进行扫描。

请注意，蓝牙API通常需要在有用户交互的情况下或在特定的事件中调用，例如点击事件。此外，蓝牙权限和浏览器支持可能会影响这些API的行为。