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状态
<script setup>
import { storeToRefs } from 'pinia'
import { useMainStore } from './stores/main'

let mainStore = useMainStore()
let { name } = storeToRefs(mainStore)
// 改名字
function changeName(){
  mainStore.SET_NAME('张三')
}
</script>

<template>
  <div>name:{{ name }}</div>
  <button @click="changeName">改名字</button>
</template>

<style scoped>
</style>

效果如下(F5刷新后依然保持更改后状态):
在这里插入图片描述

参考

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐