Nuxt路由变化导致数据丢失数据重复刷新的解决方案_nuxt3错误后丢失状态

在写自己的博客前端这段时间，使用nuxt获取第三方接口的数据时，发现每点击一个路由，再返回这个页面，会导致数据刷新，因为是第三方接口，如果一直重复的刷新数据可能会被第三方应用封禁用户从而导致无法正常获取数据，影响用户体验。

出现原因

原本我是直接在组件以data的形式存储，获取方式是通过onMounted钩子去执行获取第三方接口数据，如果路由变动，那么这个组件会被卸载，data变量内消失，onMounted钩子一直在重复去获取接口数据。

解决思路

我们首先使用pina模块去定义一个Store来存储这个组件的数据，防止组件被卸载导致的数据丢失。

pnpm add pinia @pinia/nuxt
1

在nuxt.config.ts中启用模块

export default defineNuxtConfig({
  modules: [..."@pinia/nuxt"],
});
1
2
3

首先定义一个store：
/store/store.ts

import { defineStore } from "pinia";
export const useStore = defineStore("store", {
  state: () => {
    return {
      data: "",
    };
  },
});
1
2
3
4
5
6
7
8

获取第三方接口的组件

<script setup>
	import { useStore } from "../store/store";
	import { ref, onMounted } from "vue";
	const store = useStore();
	const data = ref("");
	onMounted(async () => {
	  // 获取数据
	  if (store.$state.data === "") {
	    const du = await (await fetch("您要获取数据的url")).json();
	    store.$patch((state) => {
	      state.data = du.data.text;
	    });
	    data.value = du.data.text;
	  } else {
	    data.value = store.$state.data;
	  }
	});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18