Nuxt js asyncdata не сохраняет данные после изменения навигации

Question

Я нахожусь в pages/index.vue и для отображения новостей на моей странице я использую метод asyncdata, но когда я перехожу на другую страницу и возвращаюсь на главную, данные новостей пусты. Стоит ли сохранять данные в магазине? Или есть другое решение для этого?

   <template>
      <div>
         {{news.length}}

         <nuxt-link to="/about"> about </nuxt-link>
      </div>
   </template>

   <script>
      async asyncData({$axios}){
        return $axios.post("/news")
           .then(({data : {data : news}}) => {
             return {news};
           })
           .catch(err => console.log(err));
        }
   </script>

Answer 1

Да, обычно мы храним его в магазине vuex. Это может выглядеть примерно так:

  async asyncData({$axios, store, error}){
      try {
         let news = (await $axios.post("/news")).data.data.news;
         store.commit("SAVE_NEWS", news);
      catch (err) {
         error({ statusCode: 404, message: 'Cannot find })
      }
   },
   computed: {
      news() {
         return this.$store.state.news
      }
   }