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

【问题标题】：nuxtjs : how to force page reload and call asyncData()?nuxtjs：如何强制页面重新加载并调用 asyncData()？
【发布时间】：2021-04-27 08:42:54
【问题描述】：

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

我有一些带有模板和默认组件的页面
在组件中有 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>

我做错了什么？

【问题讨论】：

in javascript location.reload() 将重新加载页面...
谢谢，我知道了。但它会重新加载整个页面。我需要刷新它。如果我在 vue SPA 中更改组件数据，我想要同样的效果。或者像 nuxt 路由器，当你更改 url 时，它看起来像更改组件，但不是静态重新加载
那么你为什么不调用一个定期获取数据的商店呢？为什么你需要重新加载？...除非你给我们一个真实的例子，否则很难理解你想要做什么，也许解释一下为什么，因为可能有更好的方法来完成同样的事情？
因为在应用逻辑中，有一些功能需要在渲染页面之前完成。我可以使用 rest 调用，但我在 asnycdata() 中实现了相同的逻辑。
相关问题：github.com/nuxt/nuxt.js/issues/1133

标签： javascript vue.js nuxtjs

【解决方案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 }}！

【讨论】：