Nuxt3 如何在应用启动时获取并持久化数据（替代nuxtServerInit）

1. 改造Pinia Store，添加异步API请求逻辑 #

更新你的personalisation store，将setData改为异步方法，接入真实API获取数据：

import { defineStore } from 'pinia'

export const usePersonalisationStore = defineStore({
  id: 'personalisation-store',
  state: () => ({
    data: null,
  }),
  actions: {
    async setData(id) {
      if (!id) return

      // 替换为你的真实API地址，使用Nuxt内置的$fetch发起请求
      try {
        const response = await $fetch(`/api/personalisation/${id}`)
        this.data = response
      } catch (error) {
        console.error('获取个性化数据失败:', error)
        // 可选：添加降级逻辑，设置默认数据
        this.data = { someApp: { id: id } }
      }
    }
  },
  getters: {
    practiceData: state => state.data,
  },
  // 配置持久化规则（后续依赖插件生效）
  persist: {
    key: 'personalisation-data',
    storage: process.client ? localStorage : null, // 仅在客户端存储数据
  }
})

2. 修改Server端插件，处理异步初始化逻辑 #

将你的personalisation.server.js插件改为异步逻辑，确保服务端完成数据获取后再渲染页面：

import { usePersonalisationStore } from "~/store/personalisation";

export default defineNuxtPlugin(async (nuxtApp) => {
  const store = usePersonalisationStore(nuxtApp.$pinia)
  const route = useRoute()
  
  if (route.query.id) {
    await store.setData(route.query.id)
  }
})

注意：服务端环境中使用Pinia时，需要传入nuxtApp.$pinia作为参数，确保获取到正确的Store实例。

3. 实现数据持久化 #

通过Pinia持久化插件实现数据本地存储，页面刷新后数据不丢失：

1. 安装适配Nuxt3的持久化插件：

npm install @pinia-plugin-persistedstate/nuxt

2. 在nuxt.config.ts中注册插件：

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt'
  ]
})

此时Store中配置的persist选项会自动生效，数据将存入客户端的localStorage。

额外说明 #

• .server.js后缀的插件仅在服务端执行，完全对应原nuxtServerInit的服务端初始化场景；如果需要客户端也执行初始化逻辑，可去掉.server后缀，或单独编写客户端插件。
• 若需在页面路由切换时重新获取数据，可在页面组件的useAsyncData或onMounted钩子中调用setData方法，但服务端插件已处理首次请求的初始化，一般无需重复操作。

内容的提问来源于stack exchange，提问作者Russ Back