在使用nuxt3开发SSR渲染的项目的时候,如何将piana持久化到本地?如何自动引入自定义的仓库store模块,减少手动引入的麻烦?
使用插件 @pinia-plugin-persistedstate/nuxt 来达到持久化的目的。
npm i @pinia-plugin-persistedstate/nuxt 前提也需要安装 nuxt piana模块@pinia/nuxt 。
安装完成后在nuxt.config.js中进行以下配置。
1、在modules中配置刚刚安装的两个模块依赖。
首先设置piniaPersistedstate,cookieOptions是设置过期时间,storage用来指定使用localStorage还是sessionStorage。需要注意⚠️,在服务端渲染的时候没有此关键字。所以需要添加判断只能在客户端的时候持久化。
2、piana 中设置storesDirs,就能直接在页面使用相关store的配置,而无需手动引入。
export default defineNuxtConfig({
ssr: true,
compatibilityDate: '2024-11-01',
devtools: { enabled: true },
modules: [
'@pinia/nuxt',
'@pinia-plugin-persistedstate/nuxt',
],
pinia: {
storesDirs: ['./store/**']
},
piniaPersistedstate: {
cookieOptions: {
maxAge: 2 * 365 * 24 * 60 * 60 * 1000
},
storage: typeof window !== 'undefined' ? 'localStorage' : 'cookies',
debug: import.meta.env.DEV
},
})
另外有的解决方法中,让在plugins 新建如下插件配置,经过测试后其实是没有用的。
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.$pinia.use(piniaPluginPersistedstate)
})
然后在自定义piana的模块中添加 persist:true选项来进行持久化配置。
import { defineStore } from "pinia";
const useBaseData= defineStore("abc", {
state: () => ({
data: null as string | null,
}),
actions: {
async updateData(newVer: string) {
},
},
persist: true,
});
export default useBaseData;