pinia刷新数据持久化解决方案

无论是使用vuex 还是pinia都会面临一个问题：页面刷新，状态数据丢失的问题；
为了解决数据状态持久化问题，可以考虑使用插件 pinia-plugin-persistedstate

• 目录
  
• 安装pinia 并引入使用

npm install pinia

安装后, 创建stores文件夹，stores文件夹下创建index.js(里面具体代码见下面配置)；
然后在src/mian.js中引入并使用pinia

import { createApp } from 'vue'
import App from './App.vue'
import store from './stores'
import './assets/main.css'const app = createApp(App)
app.use(store)
app.mount('#app')

• 安装插件

pnpm : pnpm i pinia-plugin-persistedstate
npm : npm i pinia-plugin-persistedstate
yarn : yarn add pinia-plugin-persistedstate

• 配置插件
  在 stores 文件夹下的index.js中如下配置

import { createPinia } from "pinia"
import { createPersistedState } from "pinia-plugin-persistedstate"const store = createPinia()
// 状态持久化-插件配置
store.use(createPersistedState({serializer:{   // 指定参数序列化器serialize: JSON.stringify,deserialize: JSON.parse}
}))export default store

• 使用插件示例
  在 stores文件夹下的main.js中使用

import { defineStore } from "pinia";export const useMainStore = defineStore({id:'main',state: () => ({name: 'hello pinia'}),persist:{ // 自定义持久化方式storage: window.localStorage,beforeRestore: context => {console.log('Before', context)},afterRestore: context => {console.log('After', context)}},getters: {getName: (state) =>{return state.name}},actions:{SET_NAME(param){this.name = param}}})

• 页面中使用pinia状态

效果如下(F5刷新后依然保持更改后状态)：

参考

参考文章：https://www.modb.pro/db/417801