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

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

问题描述

用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.code === 200) { 
				// 这个接口返回的数据不能用 
			} 
		} 
		onMounted(() => { 
			fetchPartnerData() 
		}); 
		return { 
			homeData, 
			partnerList 
		} 
	} 
}) 
</script>

更正后代码

<script lang="ts">
import { defineComponent } 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
  },
  data() {
    return {
      homeData,
      partnerList: [] as any,
      chartOptions: {} as any
    }
  },
  created() {
    this.fetchPartnerData()
  },
  methods: {
    async fetchPartnerData () {
      const res = await getFetchData({
        url: '/portal-api/index/partner-list',
        method: 'GET',
        query: {
          key: new Date().getTime()
        }
      });
      if (res.code === 200) {
        this.partnerList = res.data.records
        this.initOptions(this.partnerList)
      }
    },
    initOptions (data) {
      console.log(data)
      const colors = ['#2875B9','#2875B9','#2875B9']
      const chartData = data.map(item => {
        const value = Math.floor(Math.random() * 3000)
        return {
          name: item.name,
          value
        }
      })
      const options = {
        series: [
          {
            type: 'wordCloud',
            gridSize: 2,
            sizeRange: [12, 50],
            rotationRange: [-90, 90],
            shape: 'pentagon',
            // width: 600,
            // height: 400,
            drawOutOfBound: true,
            textStyle: {
              normal: {
                color: () => {
                  const index = Math.floor(Math.random() * 3)
                  return colors[index];
                }
              }
            },
            data: chartData
          }
        ]
      }
      this.chartOptions = options
    }
  }
})
</script>

解决方法

解决方案是弃用了setup函数，并且的调用接口的时候传递了key，每次更新时间戳，

query: {
    key: new Date().getTime()
}

具体原因参考文档：
https://www.nuxt.com.cn/docs/getting-started/data-fetching#%E7%BC%93%E5%AD%98%E5%92%8C%E9%87%8D%E6%96%B0%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE