NuxtJS如何从客户端JavaScript更新data()变量并解决方法未定义报错

在Nuxt.js默认搭载的Vue 2环境中，push属于Vue重写过的数组变异方法，你写的this.ports.push({ title: devicePort, subtitle: deviceName })代码完全可用，新增条目后会触发视图响应式更新，无需额外调用$set处理。
如果你使用的是基于Vue 3的Nuxt 3，数组的所有修改天然支持响应式，该写法同样有效。

你遇到的报错是作用域与this指向问题：setTimeout、websocket的回调函数都不在Vue组件的默认作用域内，直接调用addOne()无法访问到组件内定义的方法，按以下方案修改即可：

1. 先把添加逻辑封装为组件的方法：

export default {
  data() {
    const ports = [
      { subtitle: "PORT 1", title: "COM8" },
      { subtitle: "PORT 2", title: "COM11" },
    ];
    return { ports };
  },
  methods: {
    addOne(devicePort, deviceName) {
      this.ports.push({ title: devicePort, subtitle: deviceName });
    }
  },
  // 在客户端执行的mounted钩子中初始化websocket，保证能正确访问组件实例
  mounted() {
    // 写法1：提前保存组件实例指向
    const vm = this;
    ws.on("message", function (msg) {
      // 从msg中解析出devicePort、deviceName后调用方法
      vm.addOne(msg.devicePort, msg.deviceName);
    });

    // 写法2：用箭头函数绑定this，无需额外保存实例
    // ws.on("message", (msg) => {
    //   this.addOne(msg.devicePort, msg.deviceName);
    // });
  }
}

注意：不要在Vue组件上下文之外单独编写websocket逻辑，统一放在组件生命周期钩子、状态管理相关逻辑中，才能正确访问组件的方法与响应式数据。

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