получить данные компонента Vue извне

Question

получить данные компонента Vue извне

1

Я использую Vue, загружаемый из скрипта (а не CLI), и я использую его в файле admin.js. Он хранит несколько компонентов, которые могут взаимодействовать друг с другом, вызывая события. Здесь не используется Vuex. У меня также есть другой файл, называемый сокет, который создает прослушиватель событий websocket и onmessage. Стоит отметить, что сокет не имеет ничего общего с компонентами Vue, и это другая часть приложения. Компоненты Vue могут использовать сокет, потому что он определяется как:

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

Поскольку он создается в основном объеме, все компоненты Vue могут использовать его так:

Socket.send({ ... })

Однако могут возникнуть ситуации, которые могут потребовать анализа данных, поступающих из сокета, и реагирования на них с данными из нескольких компонентов.

Я вижу два решения для них:

добавьте в каждый компонент, который может дождаться данных из сокета addEventListener и вызвать внутренние методы компонентов, в зависимости от того, какая команда поступает из сокета. Другими словами - отправьте данные от Socket к компонентам и отреагируйте правильно. Это, на мой взгляд, не очень хорошо, особенно потому, что слушатели событий любят размножаться, и есть много проблем с обеспечением этого.
получать данные из компонентов непосредственно из сокета. В том, что я имею в виду, если в событии прослушивателя появляется конкретное сообщение о проверке компонентов для необходимых данных и реагировании.

Это будет выглядеть так:

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 Components?

Kalreg 12 авг. 2018, в 13:23

Источник

Теги:

javascript

vue.js

sockets

components

1 ответ

Ещё вопросы

DigitalDrifter · Accepted Answer · 2018-08-12T11-30-00.000Z

Создайте простой плагин для переноса сокета и отправки/получения сообщений. Когда вы создаете компоненты, установите плагин 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 с необходимыми методами для отправки и получения данных. Оба подхода действительно похожи, только вопрос, который вы предпочитаете.

Спасибо за ответ, кажется превосходным, но, поскольку я совершенно новичок в плагинах, вы можете посоветовать, как мне прикрепить это. $ MySocketPlugin к var Socket, что равно var Socket = new WebSocket (wsServer + ":" + wsPort)?