在 VueJS 中使用套接字观察对象？

Question

我正在使用套接字从远程服务器接收数据。

我正在使用以下应用程序 Vue 组件：

let app = {
 name: 'app',
 data: {
  dataStore: {}
 },
 mounted () {
  var vm = this;
  socket.on('data-receive', (data) => { //data = {user: 'myUser' value: 45}
   vm.dataStore[data.user] = data.value // also tried Vue.set(vm.dataStore, data.user, data.value)
   console.log(vm.dataStore)
  })
 }

奇怪的是控制台按预期正确记录了dataStore。甚至 Vue 开发人员工具也显示了存储在 dataStore 中的正确数据。但是，dataStore 在以下 HTML 中呈现为 {}

<app>
{{dataStore}}
</app>

这是渲染的内容：

{}

是否有强制重新渲染？

Answer 1

尝试以下：

mounted () {
  var vm = this;
  socket.on('data-receive', (data) => { 
   Vue.set(vm.dataStore, 'user', data.user)   // or vm.$set(...)
   Vue.set(vm.dataStore, 'value', data. value)
   console.log(vm.dataStore)
  })
}

如documentation中所述：

Vue 无法检测属性添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此数据对象中必须存在一个属性，以便 Vue 对其进行转换并使其具有响应性

可以使用Vue.set(object, key, value) 方法向嵌套对象添加反应属性：

编辑：

正如评论中所建议的，由于代码在套接字中，这可能发生在 vue 实例之外，并且使用 forceUpdate 在 HTML 中呈现更新的变量。