如何将 Vue 变量设置为等于函数参数？

Question

我正在制作一个可以通过 node.js 服务器发送和接收 OSC 数据的 Web 应用程序。这一切都很好。但是我想在前面使用 Vue.js，在这里我在声明一个函数时遇到了问题。当我只使用 JavaScript 时，它运行良好。

Javascript：

import osc from "osc";
var port = new osc.WebSocketPort({
  url: "ws://localhost:8083" //localhost:8083 online server 178.62.209.37:8083
});
port.open();

var message = []

OSCMessage();

function OSCMessage() {
  port.on("message", function(oscMessage) {
    //console.log(oscMessage);
    OSCMessages(oscMessage);
  });
}

function OSCMessages(oscMessage) {
  message = oscMessage;
  console.log(message);
}

但是当我尝试将其放入 Vue 时，我在控制台中收到错误，即使我尝试使用 this.OSCMessages：

OSCMessages 未定义

Vue 代码：

import osc from "osc";
var port = new osc.WebSocketPort({
  url: "ws://localhost:8083" //localhost:8083 online server 178.62.209.37:8083
});
port.open();

export default {
  data() {
    return {
      value: 60,
      message: [],
    }
  },
  computed: {
    OSCMessage: function() {
      port.on("message", function(oscMessage) {
        //console.log(oscMessage); // this console log is working great.
        this.OSCMessages(oscMessage)
      });
    },
    OSCMessages: function(oscMessage) {
      this.message = oscMessage
      console.log(this.message.address);
    },
  },
}

我的目标是让Vue变量message等于oscMessage，这样我就可以继续在Vue中使用oscMessage数据。我认为这与 Vue 中的作用域有关。我希望有人可以帮助我，在此先感谢！

Answer 1

有两个问题。

1) 如果不使用 es6 箭头函数作为回调，那么this 将不会引用 Vue 实例。

改变这个：

port.on("message", function (oscMessage) {    
   this.OSCMessages(oscMessage)
});

到：

port.on("message", (oscMessage) => {    
   this.OSCMessages(oscMessage)
});

2) 这些似乎都是方法，而不是计算。或者至少 OSCMessages 像方法一样被调用。您不能将参数传递给计算对象。

变化：

computed: {

到

methods: {