Question

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

Answer 1

[__ob__: Observer]很正常，您可以看到Vue观察到的数组也为空。否则，您会看到类似[__ob__: Observer, value1, value2]的内容。

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

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

Answer 2

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

您可以添加一个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

Answer 3

一种选择是等待store准备就绪，然后再调用主体中的new Vue。

或使用asyncComputed来获取您的ID。

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

Vue返回[ob：观察者]

3 个答案:

Vue返回[__ob__：观察者]

3 个答案:

Vue返回[ob：观察者]