时间戳

首页 > 解决方案 > Vue 返回 [__ob__: 观察者]

vue.js - Vue 返回 [__ob__: 观察者]

问题描述

我有一个 API：

getFollowers(following) {
  return axios.post(`${options.serverUrl}/follower/get-followers`, {following})
},

以及具有此方法的组件：

created () {
  this.loadFollowers()
},
async loadFollowers () {
  const response = await services.getFollowers(this.$store.state.profile._id)
  console.log('followers', response)
  this.followers = response.data
},

后端：

router.post('/follower/get-followers', (req, res) => {
  const query = {
    following: req.body.following
  }
  Follower.find(query)
    .populate('follower', 'firstname lastname avatar id _id')
    .then(result => res.send(result))
    .catch(err => console.error(err))
})

问题是当页面热重新加载时（保存更改后），或者当我从 中打开此组件时，此方法可以正常router-link工作，但如果我从浏览器重新加载页面，则它不起作用；它返回一个空数组。我已经尝试了所有生命周期挂钩。

标签： vue.jsvuejs2

解决方案

[__ob__: Observer]当你有一个被 Vue 观察到的数组时，这是正常的，它也是空的。否则你会看到类似[__ob__: Observer, value1, value2].

您所描述的是，如果您services.getFollowers在应用程序存在的第一个滴答声上发出请求，您将得到一个空数组，如果稍后再执行，您将得到正确的响应。这表明这this.$store.state.profile._id不是您在启动应用程序时所期望的。

我建议添加一条debugger语句作为第二行，loadFollowers并检查状态和网络选项卡是否完成了任何请求。如果您要从某个地方恢复状态，请确保在您的应用程序真正加载之前已完全恢复状态（例如v-if，在路由器视图上添加一个仅在状态恢复时才为真）。如果您从头开始，请确保已触发您希望在此 api 调用之前触发的所有突变。

推荐阅读