【Nuxt】在 Nuxt3 中使用 pinia 并做持久化处理

官方文档

一、安装

pnpm add @pinia/nuxt

二、基础使用

1、配置

添加到 nuxt.config.js 中的 modules

// Nuxt 3
export default defineNuxtConfig({
    modules: ['@pinia/nuxt'],
})

2、使用

在 composables 文件夹下创建一个 store.ts 文件，这样使用的时候就不需要再导入了。

interface State {
  activeProductName: string
}
export const useNuxtStore = defineStore('nuxtStore', {
  state: (): State => ({
    activeProductName: '',
  }),
  actions: {
    setActiveProductName(name: string) {
      this.activeProductName = name
    },
  },
})

const store = useNuxtStore()

三、持久化配置

1、安装插件

pnpm add pinia-plugin-persistedstate

2、添加 plugins

在 plugins 文件夹中添加插件 plugins/pinia.ts

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
export default defineNuxtPlugin((nuxtApp: any) => {
  nuxtApp.$pinia.use(piniaPluginPersistedstate)
})

3、修改 store

interface State {
  activeProductName: string
}
export const useNuxtStore = defineStore('nuxtStore', {
  state: (): State => ({
    activeProductName: '',
  }),
  actions: {
    setActiveProductName(name: string) {
      this.activeProductName = name
    },
  },
  // 注意：persist定义要做判断，因为localStorage/sessionStorage是客户端参数，所以需要加process.client
  persist: process.client && {
    storage: sessionStorage,
  },
})

四、更多功能请参考

nuxt3+pinia环境下实现数据持久化
nuxt3官网搭建，适配pc和移动端支持一键切换中英文，使用pinia和持久化插件