npm install pinia-plugin-persistedstate

// main.ts
import { createPinia } from'pinia'
import piniaPluginPersistedstate from'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

// store 配置
exportconst useUserStore = defineStore('user', {
  state: () => ({ token: '' }),
  persist: {
    storage: sessionStorage, // 指定存儲(chǔ)方式
    paths: ['token'] // 選擇持久化字段
  }
})

import { createReset } from 'pinia-plugin-reset'

// 初始化
pinia.use(createReset())

// 使用示例
const store = useUserStore()
store.$reset() // 一鍵重置到初始狀態(tài)

import { debounce } from 'ts-debounce'
import { PiniaDebounce } from '@pinia/plugin-debounce'

// Pass the plugin to your application's pinia plugin
pinia.use(PiniaDebounce(debounce))

defineStore(
  'id',
() => {
    // ...the store

    return { someSearch }
  },
  {
    debounce: {
      // 防抖
      someSearch: 300,
    },
  }
)

import { createPinia } from 'pinia'
import { createORM } from 'pinia-orm'
const pinia = createPinia().use(createORM())

// User Model

import { Model } from'pinia-orm'

exportdefaultclass User extends Model {
// entity is a required property for all models.
static entity = 'users'

// List of all fields (schema) of the post model. `this.string()` declares
// a string field type with a default value as the first argument.
// `this.uid()` declares a unique id if none provided.
static fields () {
    return {
      id: this.uid(),
      name: this.string(''),
      email: this.string('')
    }
  }
// For typescript support of the field include also the next lines
declare id: string
declare name: string
declare email: string
}

pnpm add pinia pinia-undo

import { PiniaUndo } from 'pinia-undo'

const pinia = createPinia()
pinia.use(PiniaUndo)

const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 10,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

const counterStore = useCounterStore()

// undo/redo have no effect if we're at the
// beginning/end of the stack
counterStore.undo() // { count: 10 }
counterStore.redo() // { count: 10 }

counterStore.increment() // { count: 11 }
counterStore.increment() // { count: 12 }

counterStore.undo() // { count: 11 }
counterStore.undo() // { count: 10 }
counterStore.undo() // { count: 10 }

counterStore.redo() // { count: 11 }

npm install @pinia/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

// 自動(dòng)處理：  
// - 服務(wù)端數(shù)據(jù)預(yù)取  
// - 客戶端狀態(tài)同步  
// - 避免 hydration 錯(cuò)誤