Question

从vuex存储中获取asyncData（）函数中的数据并检查页面源之后。数据未显示在页面源上。

<template>
<div>
  <p>{{title}}</p>
</div>
</template>

<script>
  export default {
    asyncData({params, store}) {
       return { title: store.state.category.title };
  }
</script>

页面源结果

<p>[]</p>

预期结果应该是

<p> My Category Title </p>

我对asyncData（）函数的理解是否存在错误？

Answer 1

我无法理解您为什么使用<ng-template [cdkPortalOutlet]="componentPortal"></ng-template>从vuex存储中获取数据。只要您在网站上，就会存储在vuex存储中的数据。离开或刷新网站后，它将再次加载初始值。

asyncData()例如用于从数据库中获取数据并将其显示在您的网页上。

这里的问题是，您错误地访问了商店：

àsyncData()

Answer 2

经过一些研究。我知道使用nuxtServerInit()。我们可以直接从服务器填充商店。 If you are using a module pattern you can use it only in store\index.js file. 现在，如果我正在获取vuex存储数据，则可以在组件页面源代码中看到它。最好的部分是，如果刷新页面，则nuxtServerInit()会根据此中定义的逻辑再次自动运行并填充商店。

asyncdata函数无法在服务器端呈现vuex数据

2 个答案: