Vue 返回 [__ob__: 观察者]答案

【问题标题】：Vue returns [__ob__: Observer]Vue 返回 [__ob__: 观察者]
【发布时间】：2019-02-24 07:44:07
【问题描述】：

我有一个 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打开这个组件时，这个方法可以正常工作，但是如果我从浏览器重新加载页面，它就不起作用；它返回一个空数组。我已经尝试了所有生命周期挂钩。

【问题讨论】：

服务返回的是空数组吗？
是的。如果我从 borwser (ctrl+R, F5) 重新加载页面，response.data 看起来像 [ob: Observer]。但是，如果我只是更改组件中的某些内容并保存它，在热重载后我得到 [{...}, ob: Observer]，其中 {...} 期待对象。跨度>
仅从问题无法确定根本原因，似乎问题出在服务（后端）中。会不会是身份验证问题？例如：重新加载时，您的应用未发送适当的标头，可能是因为某些身份验证令牌不可用。
我用后端代码更新了问题。如您所见，没有特殊检查。由于未知原因，Vue 不等待操作结束并返回空数组 .__.
你试过loadFollowers: async function ()而不是async loadFollowers ()吗？ github.com/vuejs/vue/issues/3308

标签： vue.js vuejs2

【解决方案1】：

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

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

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

【讨论】：

你是上帝的救世主。我已经在工作中尝试了 3 天来解决它。添加 v-if="myarray.length > 0" 解决了我的生活。谢谢你uuuuu！
真正的你是救世主整天在网上搜索这个答案

【解决方案2】：

当我调用方法时（页面重新加载后）我的商店还没有准备好，所以this.$store.state.profile._id = undefined。 store 准备好时如何调用方法？

您可以添加一个watcher，仅在商店有配置文件 ID 时调用loadFollowers：

export default {
  watch: {
    '$store.state.profile._id': {
      immediate: true,
      handler(profileId) {
        if (profileId) {
          this.loadFollowers(profileId)
        }
      }
    }
  },
  methods: {
    async loadFollowers (profileId) {
      const response = await services.getFollowers(profileId)
      ...
    }
  },
}

demo

【讨论】：

【解决方案3】：

一种选择是等待您的 store 准备好，然后再在您的 main 中调用 new Vue。

或使用asyncComputed 获取您的ID。

或者使用@tony19解决方案看店。

【讨论】：