nuxtjs：如何强制页面重新加载并调用 asyncData()？

Question

In my NuxtJS SSR project with bootstrap-vue as frontend:

1. I have some page with template and default component

2. In component there is asyncData(context) function that makes some deal before component render and mounts

Everything is working fine, except only one thing, I need reload (or refresh) a page after some interval automatically and call asyncData again. Standard js window.location.reload() is not good solution, because it`s reloads fully page. I want refresh in vue style, when only changed components re-rendres. I tried to call $nuxt.refresh() but no any effect

Some code example (cut from real project ), page "index.vue":

<template>
  <div>
  <b-tabs content-class="mt-3">
    <b-tab  title="Test" active><shdashboard searchtype="test"> </shdashboard></b-tab>
  
  </b-tabs>
</div>
</template>


<script>
export default {
  name : "index",
  async asyncData (context) {

if(process.server)
    {

    const host = "http://SOMEHOST";
    const http = context.$http;
    const data = await  http.$get(url);

    console.log('in server render')
  
     /* 
     some logic
     commit store and prepare data fot b-tab component

      */
     }
   },
methods : {

    refresh() {
         console.log("method refresh")
          this.$nuxt.refresh(); // Not any effect. 
                }
      },
  mounted() {
   console.log("page mounted");
   setInterval(()=>{

    /*
     I need to reload page every 15 sec, and call asyncData() to get new values for
      <b-tab> component
       
    */

    this.refresh();
   },15000);
}
</script>

What do I wrong?

Answer 1

One way, if I understand your issue correctly, is to use the Vuex store for storing whatever you are fetching in fetch / asyncData . That way you don't need to worry about the internals of Nuxt.js, and what hooks are triggered when.

Ie something like this:

export default {
  computed: {
    someData () {
      return this.$store.state.someData
    },
  },
  async asyncData ({ store, $axios }){

    let data = await $axios.$get(endpoint)
    store.commit('setSomeData', data)

  },
}

Then just use {{ someData }} in your template!