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

【问题标题】：Nuxtjs asyncdata doesn't keep data after navigation changeNuxtjs asyncdata 在导航更改后不保留数据
【发布时间】：2020-11-25 08:29:08
【问题描述】：

我在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>

【问题讨论】：

标签： vue.js axios nuxt.js asyncdata

【解决方案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
      }
   }

【讨论】：

这对SEO没有负面影响吗？
@MortezaNegahi asyncData 也有 error 属性。不，它对 SEO 没有负面影响。

【解决方案2】：

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

env: {
    appUrl: "localhost:2323"
}

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

axios: {
    baseUrl : process.env.appUrl
}

asyncData 对导航变化不起作用，必须直接硬编码设置 baseUrl。

【讨论】：