Vue3如何按引用传递Ref变量？缺失的global变量是什么？

错误根源 #

这个错误并非源于你传递ref的方式（你的引用传递逻辑是正确的），而是因为mqtt库的依赖readable-stream需要Node.js环境中的global对象，但浏览器环境中默认不存在这个全局变量。

解决方案 #

方案1：在应用入口定义global对象

在应用启动的早期位置（比如src/boot/global.ts或src/main.ts）添加以下代码，将浏览器的window对象映射为global：

if (typeof global === 'undefined') {
  (window as any).global = window;
}

如果使用Quasar框架，需要在quasar.config.js中注册这个boot文件：

module.exports = {
  boot: [
    'global',
    // 其他boot文件...
  ]
}

方案2：通过Vite配置注入global变量

在quasar.config.js的vite配置段中添加define选项，直接将global指向window：

export default {
  vite: {
    define: {
      'global': 'window'
    }
  }
}

方案3：使用mqtt的浏览器专用构建版本

直接导入mqtt预编译的浏览器版本，避免依赖Node.js特定的模块：

import { connect } from 'mqtt/dist/mqtt.min.js';

关于你的Ref传递逻辑 #

你的代码中传递ref对象到setupMqtt的方式是正确的：因为ref是一个包裹对象，修改其.value属性会自动触发Vue的响应式更新，只要解决了global未定义的问题，组件就能正常接收MQTT推送的温度数据。

内容的提问来源于Stack Exchange，提问作者WoJ