функция asyncdata не отображает данные vuex на стороне сервера

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

После небольшого исследования. Я узнал, что с помощью 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>