javascript - 从外部vue获取Vue组件的数据

Question

我使用从脚本(而不是CLI)加载的Vue，并在名为admin.js的文件中使用它。它存储可能通过发出事件相互交互的多个组件。这里没有使用Vuex。我还有一个名为socket的文件，用于创建websocket和onmessage事件监听器。值得注意的是，套接字与Vue组件没有任何共同之处，并且它是应用程序的不同部分。
Vue组件可以使用套接字，因为它定义为:

var Socket = new WebSocket(wsServer + ":" + wsPort);

因为它是在主作用域中创建的，所以所有Vue组件都可以像这样使用它:

Socket.send({ ... })

但是，在某些情况下，可能需要分析来自套接字的数据，并使用来自多个组件的数据对其进行 react 。

我看到以下两种解决方案:

添加可能等待套接字addEventListener中的数据的每个组件，并根据来自套接字的命令来调用组件的内部方法。换句话说-将数据从Socket发送到Components并做出适当的 react 。在我看来，这并不是很好，特别是因为事件监听器喜欢自我繁殖，并且从中获取信息的过程一团糟。

直接从套接字获取组件中的数据。我的意思是，如果特定消息出现在事件监听器中，则onmessage检查组件以获取所需数据并使用react。

That would look like this:

Socket.onmessage = function(e) {
    let json = JSON.parse(e.data);
    if ( json.cmd == "CALLDATA" ) {
        // get data from Vue component
        let obj = objectized data from component 
        Socket.send(obj)
    }
}

问题来了:
如何(或有可能？)从Vue组件外部从一个或多个组件获取数据？

Answer 1

创建一个简单的插件来包装套接字并发送/接收消息。创建组件时，请安装插件Vue.use(MySocketPlugin)，然后在每个组件中使用该插件作为您提供的名称，即this.$mySocketPlugin。

this.$mySocketPlugin.onmessage('some-message', function (payload) {
     // do the thing with payload
})

this.$mySocketPlugin.send('some-other-message', data)    

或者，使用发送和接收数据的必要方法创建全局混合。两种方法确实很相似，只是您更喜欢哪种方法。