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

Posted 2023-02-23

【中文标题】Nuxtjs asyncdata 在导航更改后不保留数据

【英文标题】：Nuxtjs asyncdata doesn't keep data after navigation change

【发布时间】：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>

【参考方案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。