從外部vue獲取Vue組件的數據

Question

我使用從腳本（不是CLI）加載的Vue，並在名為admin.js的文件中使用它。 它存儲可以通過發出事件相互交互的多個組件。 這里沒有使用Vuex。 我還有一個名為socket的文件，用於創建websocket和onmessage事件偵聽器。 值得注意的是，套接字與Vue組件沒有任何共同之處，並且它是應用程序的不同部分。 Vue組件可以使用套接字，因為它定義為：

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

因為它是在主作用域中創建的，所以所有Vue組件都可以像這樣使用它：

Socket.send({ ... })

但是，在某些情況下，可能需要分析來自套接字的數據，並使用來自多個組件的數據對其進行反應。

我看到以下兩種解決方案：

1. 添加可能等待套接字addEventListener中的數據的每個組件，並根據來自套接字的命令來調用組件的內部方法。 換句話說-將數據從Socket發送到Components並做出適當反應。 在我看來，這並不是很好，特別是因為事件偵聽器喜歡自己繁殖，並且從中獲取信息的過程非常混亂。

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)    

或者，使用發送和接收數據的必要方法創建全局混合。 兩種方法確實很相似，只是您喜歡哪種方法。