Question

在我使用 bootstrap-vue 作为前端的 NuxtJS SSR 项目中：

我有一些带有模板和默认组件的页面
在组件中有 asyncData(context) 函数，它在组件渲染和安装之前进行一些处理

一切正常，除了一件事，我需要在一段时间后自动重新加载（或刷新）页面并再次调用 asyncData。标准 js window.location.reload() 不是一个好的解决方案，因为它会重新加载整个页面。我想以 vue 风格刷新，当只有更改的组件重新渲染时。我试图调用 $nuxt.refresh() 但没有任何效果

一些代码示例（摘自真实项目），页面“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>

我做错了什么？

Answer 1

如果我正确理解您的问题，一种方法是使用 Vuex 存储来存储您在 fetch/asyncData 中获取的任何内容。这样你就不用担心 Nuxt.js 的内部结构，以及什么时候会触发什么钩子。

即像这样：

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

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

  },
}

然后只需在您的模板中使用 {{ someData }}！

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

1 个答案: