Vue.js 数组中的对象在存储中的数据中未定义

Question

抱歉，如果这真的很明显，但我 \xe2\x80\x99m 是 Vue 新手，需要一些帮助。

\n\n

我\xe2\x80\x99m 从我的商店中获取一组数据（帖子），并尝试控制台仅记录数组中的一个对象，但它\xe2\x80\x99s 每次都显示未定义。如果我控制台记录整个数组，它会返回正常。

\n\n

I\xe2\x80\x99m 猜测这与创建的钩子中的 console.log 之前未加载数据有关？我\xe2\x80\x99已经尝试了我能做的一切，但它\xe2\x80\x99让我发疯。任何帮助表示赞赏（下面的简化代码）。

\n\n

<script>\n        export default {\n          components: {},\n\n     computed: {\n            posts() {\n              return this.$store.state.posts;\n            }\n          },\n          created() {\n            this.$store.dispatch("getPosts");\n           console.log(this.posts[0])\n           },\n        };\n        </script>\n\n\n//Store code Below\n\nexport const state = () => ({\n      posts: [],\n    })\n\n    export const mutations = {\n      updatePosts: (state, posts) => {\n        state.posts = posts\n      }\n    }\n\n    export const actions = {\n      async getPosts({\n        state,\n        commit,\n        dispatch\n      }) {\n        if (state.posts.length) return\n\n        try {\n          let posts = await fetch(\n            `${siteURL}/wp-json/wp/v2/video`\n          ).then(res => res.json())\n\n          posts = posts\n            .filter(el => el.status === "publish")\n            .map(({\n              acf,\n              id,\n              slug,\n              video_embed,\n              title,\n              date,\n              content\n            }) => ({\n              acf,\n              id,\n              slug,\n              video_embed,\n              title,\n              date,\n              content\n            }))\n\n          commit("updatePosts", posts)\n        } catch (err) {\n          console.log(err)\n        }\n      }\n    }\n

\n

Answer 1

控制台行为解释

当您将对象或数组记录到控制台，然后单击以展开/查看属性时，控制台会按单击时的状态显示属性，而不是记录时的属性。因此，如果它们在记录后发生更改，您将看到新值。

如何？由于对象和数组是引用变量，因此控制台会存储引用，然后在您单击时自行更新。这仅适用于对象和数组。

相反，当您将原语记录到控制台时，您只能看到它在记录时的样子。

在 Chrome 中，您还会在控制台中的对象旁边看到一个蓝色的小方块。当您将鼠标悬停时，它会告诉您“刚刚评估了下面的值”。

这就是为什么您在记录一项时从未看到该值，因为它是一项尚不存在的项目。但posts总是有一个引用，因为它被初始化为一个空数组。因此，在记录posts参考时，当您单击时，数据已到达。

这是一个演示，试图让这一点变得非常清楚。