当数据库更新时，是否有一种方法可以从 vue 更新数据对象？答案

【问题标题】：Is there a method to update a data object from vue when the database updates?当数据库更新时，是否有一种方法可以从 vue 更新数据对象？
【发布时间】：2022-01-09 22:24:59
【问题描述】：

我正在制作一个允许用户创建帐户然后加入房间的网络应用程序。在房间里，他们可以点击一个按钮，基本上可以让他们随机选择要送给谁礼物。我遇到的问题是，如果所有用户的数据库都更新了，我如何从 vue 更新数据对象。我的意思是如果另一个用户加入了一个房间，新用户拥有更新的数据对象，但在他之前的所有其他用户都将拥有过时的数据对象。所以我本质上要问的是，如果数据库更新，vue 将如何更新数据对象。

我所说的数据对象是指这样的东西

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

update() 生命周期钩子会这样做吗？或计算（）？在任何人回答之前，请记住我需要将它更新给所有加入房间的用户。

我用的是vue2，因为我用的是vuetify

【问题讨论】：

你需要 websocket

标签： javascript vue.js vuetify.js

【解决方案1】：

正如 Fatur 上面所说，通常在像这样的开放式游戏风格中，您可以加入房间，新用户可以加入和离开，您需要设置网络连接 (web socket) 以不断了解房间里的人.

由于您已经在使用 Vuetify 框架，您可以很容易地将 Vue Native Websocket 添加到您的项目中。我从未使用过它，但它看起来是一个可靠的项目，并且在相当一致的基础上进行了更新。

我能立即想到的唯一替代方案是：每次用户单击按钮赠送随机用户时，为房间中的所有当前用户访问数据库或 API。但同样，用户可以在您发出此请求时进入房间，我真的不建议这样做。此外，如果您有多个房间，这会严重影响您的数据库或 API，这我不推荐这个的另一个原因。

【讨论】：

我应该修改我的rest api来处理websockets吗？ vue-native-websockets 并没有真正指定。
@LancePidor 我认为如果您设置为在一端收听 websocket，那么您肯定需要在后端使用 websocket。 Rails 是我在这方面拥有丰富经验的唯一后端框架，仅举个例子——如果您有 Rails REST API，Action Cable 可能是您的前端可以不断监听后端更新的一种方式，而无需敲打它每 2-3 秒。它本质上只是在数据发生变化时发出“广播”，而你的 Vue 组件中的数据是 Reactive 的，所以它也会更新。