Search code examples
vue.jsaxiosnuxt.jsasyncdata

Nuxtjs asyncdata doesn't keep data after navigation change

I am in pages/index.vue and for show news in my page, i use asyncdata method but when i goto an other page and come back to home news data are empty. Should i save data on store? Or have other solution for this?

   <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>
Solution

  • When you use .env in nuxt.config like this

    env: {
    appUrl: "localhost:2323"
}

    and use env parameters in axios config on nuxt.config like this

    axios: {
    baseUrl : process.env.appUrl
}

    asyncData doesn`t work on navigation change, And you must set baseUrl directly hardcode.