发出异步服务器请求的组件中的 Vue 反应性问题答案

【问题标题】：Vue reactivity issues in component making asynchronous server requests发出异步服务器请求的组件中的 Vue 反应性问题
【发布时间】：2020-10-23 08:36:36
【问题描述】：

少量上下文：我有一个名为 Articles 的 Vue 视图。当组件安装到 DOM 时，我使用 axios 库（结合 Laravel 控制器和 API 路由）从数据库中获取所有帖子。文章视图包含一个名为active 的数据属性，它指向当前选定的帖子。点击侧边栏中的其他帖子会更新active，随后会显示新帖子。

现在，每个帖子都有许多 cmets，如果您愿意，这些 cmets 反过来可以链接到子 cmets。但是，Articles.vue 中的挂载生命周期挂钩仅被调用一次，当我尝试将服务器请求放入 updated() 时，一切似乎都正常，但我最终会得到 429 状态（请求太多）。我的猜测是，对于检索到的每条评论，updated() get 中的代码都会再次被调用。

我想我的问题如下：我怎样才能使Post.vue 反应，因为现在即使选择了另一个帖子，挂载的生命周期挂钩也只会被调用一次。

代码如下：

Articles.vue

export default {
        name: "Articles",
        components: {SidebarLink, PageContent, Sidebar, Post, Searchbar, Spinner},
        data() {
            return {
                posts: [],
                active: undefined,
                loading: true
            }
        },
        mounted() {
            this.fetchPosts();
        },
        methods: {
            async fetchPosts() {
                const response = await this.$http.get('/api/posts');
                this.posts = response.data;
                this.active = this.posts[0];

                setTimeout(() => {
                    this.loading = false;
                }, 400);
            },
            showPost(post) {
                this.active = post;
            }
        }
    }

Post.vue

export default {
        name: "Post",
        components: {Tag, WennekesComment},
        props: ['post'],
        data() {
            return {
                expanded: true,
                comments: []
            }
        },
        mounted() {
            this.fetchComments();
        },
        methods: {
            async fetchComments() {
                let response = await this.$http.get('/api/posts/' + this.post.id + '/comments');
                this.comments = response.data;
            }
        }
    }

WennekesComment.vue

export default {
        name: "WennekesComment",
        props: ['comment'],
        data() {
            return {
                subComments: []
            }
        },
        mounted() {
            this.fetchSubcomments();
        },
        methods: {
            fetchSubcomments() {
                let response = this.$http.get('/api/comments/' + this.comment.id).then((result) => {
                    // console.log(result);
                });
            }
        }
    }

模板逻辑

<wennekes-comment v-for="comment in comments" :key="comment.id" :comment="comment"></wennekes-comment>

<post v-if="!loading" :post="active" :key="active.id"/>

提前谢谢，如果这个问题有些不清楚，我很抱歉，我有点不知所措。

问候，

瑞恩

更新

我想我得到了它的工作。在Articles.vue 中，我将一个密钥附加到post 组件。我认为这是 Vue 知道要更新哪个特定组件实例的方式。

【问题讨论】：

您能添加显示WennekesComment.vue 组件的模板逻辑吗？我认为您将其添加到 Post.vue
我已经更新了代码！我想我得到了它的工作。感谢您的调查！
很好解决了，其他用户可能会发现它很有用。我看到 :key 是一个常见问题

标签： vue.js vuejs2 axios vue-component

【解决方案1】：

我想我得到了它的工作。在 Articles.vue 中，我在 post 组件中附加了一个键。我认为这是 Vue 知道要更新哪个特定组件实例的方式。

【讨论】：