*Pinia 示例*

// stores/lang.ts
import { defineStore } from 'pinia'
export const useLangStore = defineStore('lang',{
state :=> ({
defaultLanguage : 'zh',Language : {'zh':'zh','en':'en'},locales :,locale : 'zh'
}),actions:{
SET_LANG{
if){
this.locale = locale
}
}
}
})

*使用方式对比*
javascript
// Vuex
this.$store.state.lang.locale
this.$store.dispatch
// Pinia
const langStore = useLangStore
langStore.locale
langStore.SET_LANG

步骤 6：迁移 HTTP 请求 
Pain Point:$axios 的拦截器在 $fetch 中失效，需要自行封装。


*旧插件* 
// plugins/axios.js
export default function{
$axios.setBaseURL
$axios.onRequest
$axios.onResponse return res.data })
$axios.onError)
inject)
}

*新插件* 
// plugins/http-adapter.ts
import indexApi from '@/api/index'
import { useLangStore } from '@/stores/lang'
export default defineNuptPlugin => {
const langStore = useLangStore
const baseURL = 'https://api.example.com'
const httpAdapter = {
async get{
const start=Date.now
try{
const res=await $fetch(url。{
baseURL,method:'GET',params,headers:{
'Content-Type':'application/json','Accept-Language': langStore.locale==='en'?'en-US':'zh-CN'
}
})
console.info-start+'ms')
return res
}catch{ console.error;throw e }
},async post{
const start=Date.now
try{
const res=await $fetch(url。{
baseURL,method:'POST',body:data,headers:{
'Content-Type':options.headers?.||'application/json','Accept-Language': langStore.locale==='en'?'en-US':'zh-CN'
},params:options.params||{}
})
console.info-start+'ms')
return res
}catch{ console.error;
throw e }
}
}
const api = indexApi
return {
provide:{ indexApi : api }
}
})

*API 定义* 保持兼容，无需改动。

步骤 7：迁移插件语法 
Pain Point:The old plugin signature `) conflicts with auto‑import composables.



*旧*的观点是。`export default =>{ inject }` 

从*新*来看，`export default defineNuptPlugin=>)` 

*客户端限定*： 在 nu xt.config 中仍使用 `{ src:'/plugins/foo',mode:'client'}` 即可。怎么说呢，

步骤 8 ：迁移中间件语法   Pain point : 老版 middleware 用 `redirect`。升级后报未定义错误，
javascript // middlewares/i18n.ts export default defineNuptRouteMiddleware=>{ const store=useLangStore;if{ return navigateTo } })


`redirect`→ `navigateTo` 

`store`→Pinia Store `) 

`context.app`→ `useNuptApp` 

步骤 9 ：迁移 i18n 插件   Pain point : VueI18n 的构造函数已废弃。
javascript // plugins/i18n.ts import { createI18n } from 'vue-i18n' import en from '~/locales/en.json' import zh from '~/locales.zh.json'
export default defineNuptPlugin=>{
const langStore=useLangStore
const i18n=createI18n({
至于legacy。true,locale : langStore.locale,fallbackLocale :'zh',messages:{ en,zh}
})
function t{
const hash=`K${crc32.toString}`
let txt=i18n.global.t
if{ console.warn;txt=key}
return txt
}
vueApp.provide
vueApp.config.globalProperties.$i18n=i18n.global
return{ provide:{ i18n }}
})


`new VueI18n`→ `createI18n` 

`i18 n.t`→ `i18 n.global.t` 

步骤10 ：页面组件迁移  
javascript // Old
export default{
data{return{count:0}}。computed:{...mapState},methods:{...mapActions},async asyncData{const d=await $axios.$get;return{d}}
}
// New
export default{
data{return{count0}},computed:{...mapState},methods:{...mapActions}。async setup{
const {$data}= await useFetch
return{$data}
}
}


`asyncData`→ `useFetch` / `useAsyncData` 

`this.$ax ios`→ `$fetch` 或自定义 `$indexApi` 

`this.$store`→ Pinia Store `)。) \ \

步骤11 ：重命名静态资源目录 & nbsp;