从 Vue 外部获取 Vue 组件的数据

Question

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

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

因为它是在 main 范围内创建的，所以所有 Vue 组件都可以像这样使用它：

Socket.send({ ... })

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

我看到了两种解决方案：

1. 添加每个可能等待来自套接字的数据的组件 addEventListener 并根据来自套接字的命令调用组件的内部方法。换句话说 - 将数据从 Socket 发送到组件并做出正确反应。在我看来，这不是很好，特别是因为事件监听器喜欢自我繁殖，而且保护起来很麻烦。

2. 直接从套接字获取组件数据。我的意思是，如果特定消息出现在事件侦听器 onmessage 检查组件中是否需要数据并做出反应。

看起来像这样：

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)    

或者，使用发送和接收数据的必要方法创建一个全局 mixin。这两种方法非常相似，只是您喜欢哪一种。