Nuxtjs asyncdata doesn't keep data after navigation change

Question

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>

Ilijanovic · Accepted Answer · 2020-08-05 08:04:29Z

2

Yea, usually we store it in a vuex store. It could look something like this:

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

edited Aug 5, 2020 at 8:04

answered Aug 5, 2020 at 7:50

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Morteza Negahi Over a year ago

Doesn't this have a negative effect on SEO?

Ilijanovic Over a year ago

@MortezaNegahi asyncData also have the error property. No it does not have a negative effect on SEO.

Morteza Negahi · Accepted Answer · 2021-01-18 08:10:46Z

1

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.

answered Jan 18, 2021 at 8:10

Morteza Negahi

3,5138 gold badges26 silver badges42 bronze badges

Collectives™ on Stack Overflow

Nuxtjs asyncdata doesn't keep data after navigation change

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related