Nuxtjs 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
      }
   }

Answer 2

当你像这样在 nuxt.config 中使用 .env 时

env: {
    appUrl: "localhost:2323"
}

并在 nuxt.config 上的 axios 配置中使用 env 参数，像这样

axios: {
    baseUrl : process.env.appUrl
}

asyncData 不适用于导航更改，您必须直接硬编码设置 baseUrl。

Nuxtjs asyncdata 在导航更改后不保留数据

Nuxtjs asyncdata doesn't keep data after navigation change

vue.js

axios

nuxt.js

asyncdata