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

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

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

这里的问题是，您访问商店的方式有误：

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

Answer 2

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

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

asyncdata function not rendering vuex data on sever side

javascript

vuex

nuxt.js

vuex-modules