--- theme: github --- ## 前言在我写`nuxt3`项目时，遇到了使用`pinia`在页面刷新时数据丢失的老生常谈的问题，在这里简单记录下我的解决方案 ## 工程搭建这里我就不做过多的工程搭建介绍，我是跟着[nuxt官网](https://nuxt.com/docs/getting-started/installation#installation)步骤完成的工程初始化，完整的工程代码可[点击链接](https://github.com/gumingWu/nuxt-project)查阅初始化后的工程结构如下 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1b25af65f7942eaa75dc2615761e730~tplv-k3u1fbpfcp-watermark.image?) ### 配置并使用pinia 根据[pinia官网](https://pinia.vuejs.org/ssr/nuxt.html)的步骤配置即可首先安装相关依赖 ``` pnpm add pinia @pinia/nuxt ``` 然后进行配置，修改`nuxt.config.ts` ```diff export default defineNuxtConfig({ + modules: [ + '@pinia/nuxt' + ] }) ``` 个人习惯，我会配置一个autoImport，运行时自动引入`defineStore` ```diff export default defineNuxtConfig({ modules: [ '@pinia/nuxt' ], + pinia: { + autoImports: [ + 'defineStore', // import { defineStore } from 'pinia' + ], + } }) ``` 新建目录`composables`，新建文件`store.ts` ```ts export const useNuxtStore = defineStore('nuxtStore', () => { const state = ref(0) const setState = (num: number) => { state.value = num } return { state, setState, } }) ``` 我这里的写法是[Setup Stores](https://pinia.vuejs.org/core-concepts/#setup-stores)，就像是一个普通的`composable`，只不过使用`defineStore`定义生成定义好`store`之后，我们在`app.vue`中使用`store` ```html ``` 这时候保存即可看到效果 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9758f81c2b784c3eab645b239a207d2f~tplv-k3u1fbpfcp-watermark.image?) 提个醒，我这里直接使用的`const store = useStateStore()`而没有解构，是因为解构后会丢失响应式，如果你需要解构直接使用`state`并且保持响应式，可以使用`storeToRefs` 多次点击`setState`按钮会增加`state`的数值，当页面刷新之后，`state`会变回0 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8c6555977114083bd037f1b3c9ee4de~tplv-k3u1fbpfcp-watermark.image?) 到这里工程就算是搭建好了，下面来讲解持久化保持数据的处理方法 ## 使用`vueuse` `vueuse`中有个`storage`相关的hook，我们可以使用hook来手动保存`store`，在刷新的时候会从`storage`中读取，就能达到数据保存的效果我们需要配置`nuxt+vueuse`的环境，这里根据[vueuse官网](https://vueuse.org/guide/#installation)进行配置即可首先安装依赖 ``` pnpm add @vueuse/nuxt @vueuse/core ``` 然后配置`nuxt.config.ts` ```diff export default defineNuxtConfig({ modules: [ '@pinia/nuxt', + '@vueuse/nuxt', ], pinia: { autoImports: [ 'defineStore', // import { defineStore } from 'pinia' ], } }) ``` 这样就能直接在工程中使用`@vueuse/core`的所有hook了我们使用`useSessionStorage`hook来进行缓存，修改`composables/store.ts` ```diff export const useStateStore = defineStore('nuxtStore', () => { - const state = ref(0) + const state = useSessionStorage('nuxt-store-test', 0) const setState = () => { state.value = state.value + 1 } return { state, setState, } }) ``` 这里我们使用`useSessionStorage`来初始化`state`，在应用首次运行的时候，`session-storage`中不存在`nuxt-store-test`这个键值对，所以就取第二个默认值参数作为初始值保存运行后可以看到，控制台中多了个`nuxt-store-test`键值对 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1af43959f6524c209952757952318b57~tplv-k3u1fbpfcp-watermark.image?) 当我点击按钮改变`state`的时候，控制台中`nuxt-store-test`的值也跟着改变 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/805ed68b3ed24d87823ca31073302403~tplv-k3u1fbpfcp-watermark.image?) 当页面刷新的时候，期望场景是`state`的值会保持不变，但其实发现，`state`会变回0 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5dd9d06abe6542629837eb7d69db03da~tplv-k3u1fbpfcp-watermark.image?) 具体原因在[pinia文档](https://pinia.vuejs.org/cookbook/composables.html#ssr)里也有讲解，在SSR环境下使用部分`composables`需要额外注意 **当我们在SSR下使用`useSessionStorage`时，需要考虑`hydrate`阶段的处理，`state`的值应该从浏览器读取，而不需要在`hydrate`阶段进行激活，所以我们需要对这些字段跳过处理** 我们修改`composables/store.ts` ```diff + import { skipHydrate } from 'pinia' export const useStateStore = defineStore('nuxtStore', () => { const state = useSessionStorage('nuxt-store-test', 0) const setState = () => { state.value = state.value + 1 } return { + state: skipHydrate(state), setState, } }) ``` 使用`skipHydrate`方法，标记`state`属性不能被激活，需要到浏览器中读取数值，这样处理后在页面刷新时也能保持数据的内容 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d5d48d9875a4404a39f8b48f5e659a5~tplv-k3u1fbpfcp-watermark.image?) ## 使用pinia插件实现持久化这应该是比较普遍的做法，像vuex时期也是用持久化插件来实现在`pinia`中有个下载量较多的插件`pinia-plugin-persistedstate`，这是[插件文档](https://prazdevs.github.io/pinia-plugin-persistedstate/) 首先安装插件 ``` pnpm add @pinia-plugin-persistedstate/nuxt ``` 然后配置`nuxt.config.ts` ```diff export default defineNuxtConfig({ modules: [ '@pinia/nuxt', '@vueuse/nuxt', + '@pinia-plugin-persistedstate/nuxt', ], pinia: { autoImports: [ 'defineStore', // import { defineStore } from 'pinia' ], }, + piniaPersistedstate: { + storage: 'sessionStorage', + } }) ``` 新建文件`composables/plugin.ts`，在这里写使用插件的store ```ts export const usePluginStateStore = defineStore('pluginStore', () => { const pState = ref(0) const setPState = () => { pState.value += 1 } return { pState, setPState, } }, { persist: true, }) ``` 重点是，在`defineStore`方法的第三个参数，要传入`persist: true`，表示这个store要进行持久化处理在`app.vue`中使用该store ```diff ``` 这时候点击`setPState`按钮，控制台就会保存`pState`的值，并且刷新后也能展示 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbbe54649b57431fb263c6889cae0080~tplv-k3u1fbpfcp-watermark.image?) ## 使用其他pinia插件以上两种方案已经能很好的解决现有问题，但如果你还希望使用其他`pinia`插件，而该插件没有做`nuxt`版本呢在[pinia文档](https://pinia.vuejs.org/core-concepts/plugins.html#nuxt-js)中有介绍在`nuxt`环境下如何使用`pinia`插件，按照如下方式使用即可，这里没有进行验证，想用这种方式的需要自行验证使用 ``` // plugins/myPiniaPlugin.ts import { PiniaPluginContext } from 'pinia' function MyPiniaPlugin({ store }: PiniaPluginContext) { store.$subscribe((mutation) => { // react to store changes console.log(`[🍍 ${mutation.storeId}]: ${mutation.type}.`) }) // Note this has to be typed if you are using TS return { creationTime: new Date() } } export default defineNuxtPlugin(({ $pinia }) => { $pinia.use(MyPiniaPlugin) }) ``` ## 总结文章主要介绍了两种`nuxt3+pinia`的数据持久化处理： - 使用`vueuse`的`useStorage`/`useLocalStorage`/`useSessionStorage` - 使用`pinia`的插件`pinia-plugin-persistedstate` 相信看完后你们应该也有解决这方面问题的思路