nuxtjs:如何强制页面重新加载和调用asyncData()?

Question

在我的NuxtJS SSR项目中，bootstrap- value作为前端:

1. 我有一些页面的模板和默认组件

2. 在组件中有asyncData(context)在组件渲染和挂载之前做一些交易的函数

一切都很好，除了一件事，我需要重新加载(或刷新)一个页面后，一些间隔自动调用asyncData再一次。标准jswindow.location.reload ()不是一个好的解决方案，因为它会重新加载整个页面。我想在vue样式刷新，只有改变组件重新渲染。我尝试调用$ nuext .refresh()但没有任何效果

一些代码示例(从实际项目中截取)，页面"index. ":

<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中获取的任何内容。这样你就不需要担心next .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 }}!