Есть ли способ обновить объект данных из vue при обновлении базы данных?

#javascript #vue.js #vuetify.js

#javascript #vue.js #vuetify.js

Вопрос:

Я создаю веб-приложение, которое позволяет пользователям создавать учетную запись, а затем присоединяться к комнате. Внутри комнаты они могут нажать кнопку и, по сути, позволяют им выбирать, кому они собираются подарить подарок случайным образом. Проблема, с которой я сталкиваюсь, заключается в том, как мне обновить объект данных из vue, если база данных обновляется для всех пользователей. Я имею в виду, что если другой пользователь присоединился к комнате, у нового пользователя будет обновленный объект данных, но у всех других пользователей, которые были до него, будет устаревший объект данных. Итак, по сути, я спрашиваю, как vue обновит объект данных, если база данных обновится.

И под объектом данных я подразумеваю что-то вроде этого

 data() {
 return {
  room: { name: "room", users: [] }
 }
}
 

Делает ли это перехват жизненного цикла update()? или вычисляемый ()?
И прежде чем кто-нибудь ответит, помните, что мне нужно, чтобы он обновился для ВСЕХ пользователей, которые присоединились к комнате.

Я использую vue2, так как я использую vuetify

Комментарии:

1. Для этого вам нужен websocket

Ответ №1:

Как сказал Фатур выше, обычно при таком стиле открытой игры, когда вы присоединяетесь к комнате, а новые пользователи могут присоединиться и уйти, вы хотели бы настроить веб-соединение (веб-сокет), чтобы постоянно знать, кто находится в комнате.

Поскольку вы уже используете фреймворк Vuetify, вы, вероятно, могли бы довольно легко добавить собственный веб-сокет Vue в свой проект. Я никогда не использовал его, но похоже, что это надежный проект, который обновляется на довольно постоянной основе.

Единственной альтернативой этому, о которой я могу подумать сразу, было бы: каждый раз, когда пользователь нажимает кнопку, чтобы подарить случайному пользователю, нажимайте на базу данных или API для всех текущих пользователей в комнате. Но опять же, пользователи могут входить в комнату, пока вы делаете этот запрос, и я действительно не рекомендую это. Кроме того, это сильно затруднит работу вашей базы данных или API, если у вас несколько комнат, что является еще одной причиной, по которой я этого не рекомендую.

Комментарии:

1. Должен ли я изменить свой rest api для обработки websockets? Vue-native-websockets на самом деле не указывает.

2. @LancePidor Я думаю, что если вы настроены на прослушивание веб-сокета на одном конце, вам определенно нужно, чтобы веб-сокет был включен в серверную часть. Rails — единственная серверная платформа, в которой у меня был большой опыт, поэтому просто в качестве примера — если у вас есть Rails rest API, Action Cable может быть одним из способов, которым ваш интерфейс может постоянно прослушивать обновления на серверной части, не загружая его каждые 2-3 секунды. По сути, он просто отправляет «широковещательные рассылки» при изменении данных, а данные в вашем компоненте Vue являются реактивными, поэтому они также будут обновляться.