踩坑Nuxt3.js，刷新页面不调接口

Nuxt3.js中解决数据刷新丢失问题及代码优化,

最新推荐文章于 2024-08-23 11:36:12 发布

原创

最新推荐文章于 2024-08-23 11:36:12 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

文章讲述了作者在使用Nuxt3.js结合Typescript开发时遇到页面刷新数据丢失的问题，通过将setup函数替换为data和created方法，并添加动态查询参数解决。解决方案涉及到组件初始化和定期更新时间戳获取新数据。

昨天到今天都被这个问题困扰，在不放弃的前提下终于解决，特此纪念一下！

问题描述

用Nuxt3.js结合Typescript写了一个页面，发现刷新页面数据就没有了，接口也不调用了，只有重启系统才会重新调用。

错误代码

<script lang="ts"> 
import {
   
    defineComponent, onMounted } from 'vue' 
import {
   
    homeData } from './data/homeInfo.ts' 
import WordCloud from '@/components/EchartItem/WordCloud.vue' 
import {
   
    getFetchData } from '@/composables/fetch' 
export default defineComponent({
   
    
	name: 'PanelKhxz', 
	components: {
   
    WordCloud }, 
	setup() {
   
    
		const partnerList = ref([]) 
		const fetchPartnerData = async () => {
   
    
			const res = await getFetchData({
   
    
				url: '/portal-api/index/partner-list', 
				method: 'GET' 
			}); 
			if (res.