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

Question

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

<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

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

Answer 2

我不明白您为什么使用asyncData() 从 vuex 存储中获取数据。只要您在您的网站上，存储在 vuex 存储中的数据就会被存储。离开或刷新站点后，它将再次加载初始值。

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

这里的问题是，你访问商店错误：

<template>
   <div>
      <p>{{$store.state.category.title}}</p>
   </div>
</template>