vue2 串口通信报错， ‘getWriter‘ on ‘WritableStream‘: Cannot create writer when WritableStream is locked`

问题：vue2 使用串口通信，报错[vue.runtime.esm.js:1896 TypeError: Failed to execute 'getWriter' on 'WritableStream': Cannot create writer when WritableStream is locked

这个错误表明你尝试在一个已经被锁定的 WritableStream 上创建一个 writer。在 Web Serial API 中，当你尝试对一个已经打开且正在使用的 WritableStream 再次调用 getWriter 时，就会发生这个错误。以下是一些可能的解决步骤：

1. 确保流未被锁定：
   在创建 writer 之前，确保没有其他地方已经获取了这个流的 writer 并且正在使用它。

2. 流重置：
   如果流已经被锁定，你可能需要关闭当前的串口，然后重新打开来重置流。

3. 正确的流管理：
   确保每次使用 getWriter 之后，适当地关闭 writer 和串口。

下面是一个简单的代码示例，展示了如何在 Vue 组件中管理串口流：

<template>
  <button @click="sendData">发送数据</button>
</template>

<script>
export default {
  data() {
    return {
      port: null,
      writer: null,
    };
  },
  methods: {
    async openSerialPort() {
      try {
        this.port = await navigator.serial.requestPort({ filters: [...] });
        await this.port.open({ baudRate: 9600 });
        this.writer = await this.port.getWriter();
      } catch (error) {
        console.error('打开串口或获取写入器失败:', error);
      }
    },
    async sendData() {
      if (!this.port || !this.writer) {
        console.error('串口未打开或写入器未获取');
        return;
      }
      try {
        // 使用 writer 写入数据
        const data = new Uint8Array([/* 数据 */]);
        await this.writer.write(data);
      } catch (error) {
        console.error('写入串口失败:', error);
      }
    },
    async closeSerialPort() {
      if (this.writer) {
        await this.writer.close();
      }
      if (this.port) {
        await this.port.close();
      }
      this.writer = null;
      this.port = null;
    }
  },
  beforeDestroy() {
    this.closeSerialPort();
  }
};
</script>

在上述代码中，openSerialPort 方法打开串口并获取 writer。sendData 方法使用 writer 发送数据。closeSerialPort 方法确保在组件销毁前关闭 writer 和串口。

如果错误仍然存在，检查以下方面：

1. 是否有多个地方尝试获取同一个 WritableStream 的 writer。

2. 是否在获取 writer 之后，在合适的时候关闭了 writer 和串口。

3. 确保每次使用串口后，都要关闭 writer 和串口，避免它们被锁定。如果问题仍然存在，可能需要检查你的具体实现细节，以确保正确管理串口状态。