Question

我有一个简单的VueJS应用。在我的组件之一中，我试图检索文章列表。如果用户已登录，我会提出特定要求。否则，我再做一个。这是我的代码：

<script>
  import { getFollowersPosts } from './../services/post';

  export default {
    name: 'Home',
    props: {
      user: Object
    },
    data() {
      return {
        posts: []
      }
    },
    async updated() {
      if (this.user) {
        this.posts = await getFollowersPosts(1);
      }
    }
  }
</script>

问题是user道具来自父组件，并且应用需要一段时间才能检索到它。检索到user后，它将更新组件，然后我便可以使用getFollowersPosts()向后端发出请求，因为我现在有了user。

但是，一旦获得请求结果，就需要更新posts数组。这将导致组件再次更新，然后重新开始。现在，我得到的是组件的无限期更新，更糟糕的是，MySQL数据库最终关闭了连接。

有办法避免这种情况吗？我只想检索文章列表，就是这样！

谢谢。

tl; dr 我正在尝试发出一个在prop更新后更新组件数据的请求，但这会导致组件无限更新。如果我使用另一个created()之类的生命周期挂钩，则将无法检索user道具。

Answer 1

您应该注意用户对象上的更改，然后在该对象上进行getFollowersPosts（）请求。

watch: {
    user: function (val) {
      if (val) {
        this.posts = await getFollowersPosts(1);
      }
    }
}

您可以在此处了解有关观看者的更多信息：https://it.vuejs.org/v2/guide/computed.html

Answer 2

哇，我一直在努力寻找答案，而在发布问题后，我终于找到了解决方法。

所以我让它可以使用观察程序工作。我猜每个更新的道具只调用一次观察者。这是我的代码：

<script>
  import { getFollowersPosts } from './../services/post';

  export default {
    name: 'Home',
    props: {
      user: Object
    },
    data() {
      return {
        posts: []
      }
    },
    watch: {
      user: async function() {
        if (this.user) {
          this.posts = await getFollowersPosts(1);
        }
      }
    }
  }
</script>

VueJS Updated（）生命周期挂钩导致无限循环

2 个答案: