nuxt-js从服务器端访问组件数据

Question

有什么方法可以从服务器端访问组件数据或道具吗？

我有测试应用程序与模板的测试组件

<template>
<div>
<h1>TEST PAGE</h1>
<p>counter : {{counter}}</p>
</div>
</template>

在asyncData((中，我启动了一个计时器

asyncData(context)
{
console.log('in server process')
console.log(context)
let timerId = setInterval(() => {
..... some logic
}, 4000);
return {counter : 15};
},
}

那么问题是，如何可能在模板中动态更改计数器值呢？出于某种原因，我需要在服务器端进行谢谢

Answer 1

asyncData方法运行得更早，并且在加载页面之前只运行一次。它在组件初始化之前执行。

参考：Nuxt生命周期，异步数据

解决方案：

您可以watch属性并发送异步请求(使用axios/fetch等库(，让服务器知道并在服务器上处理它。

Answer 2

我认为您应该在AsyncData生命周期期间对后端进行API调用。您可以在此处参考这个Nuxt示例。

Returning a Promise

export default {
asyncData( context ) {
return axios.get(`https://my-api/counter`).then(res => {
return { counter: res.data.counter}
})
}
}