一、安装
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和持久化插件