Vue3 pinia持久化存储（组合式Api案例演示）

pinia-plugin-persist（ pinia持久化插件）

本文采用的是 组合式Api的方式来做Pinia的持久化存储演示

如果对pinia的持久化还是不是很了解的👨‍🎓｜👩‍🎓，可以看一下笔者的上一篇文章，或者去官网查看一下！！！！！！👇👇👇🔗

点击我，跳转至组合式Api声明仓库🌹🌹

---

持久化存储：

使用过Vuex的同学大概率都对Vuex 的数据持久化存储有一定的了解。

数据持久化存储:顾名思义是对数据进行永久存储，防止页面刷新导致数据发生丢失！！！

---

一、为什么要进行数据持久化存储

前面已经讲过了：主要是为了防止页面刷新，导致已经有的数据出现丢失的情况。

不使用仓库也可以对数据进行持久化存储。例如：可以使用sessionStroage或localStroage去进行数据的持久化存储。

pinia-plugin-persist插件的本质也是通过 浏览器的本地存储来实现的！

二、pinia-plugin-persist使用步骤如下

1.引入库

代码如下：

//在控制台执行如下代码：npm i pinia-plugin-persist 

安装结果如下图所示：

按照常理都能正常安装成功。如果没安装成功尽量去尝试切换npm源来解决问题。

2.在Pinia上注册pinia-plugin-persist插件

代码如下

import { createApp } from 'vue'import {createPinia} from 'pinia'
//1.引入piniaPersist持久化插件
import piniaPersist from 'pinia-plugin-persist'
import App from './App.vue'const pinia =createPinia()
//2.在Pinia中注册  piniaPersist
pinia.use(piniaPersist)const app =createApp(App)
app.use(pinia)
app.mount('#app')

如下图所示（操作解释）

3.声明测试store（组合式Api）

组合式声明Store文章（不会组合式Api的同学点👇🔗）

Pinia仓库声明方式

代码如下：

import { defineStore } from "pinia";
import { ref, computed } from "vue";export const sessionStore = defineStore("sessionStore",() => {//1。定义仓库：状态const sessionCountTest = ref(0);//2。定义仓库：计算属性const testComputed = computed(() => `计算属性：$$$$$----${sessionCountTest.value}----$$$$$`);//3。定义仓库：修改状态的methodsconst addSessionCountTest = () => {sessionCountTest.value++;};const subSessionCountTest = () => {sessionCountTest.value--;};// 4.导出状态return {sessionCountTest,testComputed,addSessionCountTest,subSessionCountTest,};},{persist: {enabled: true, //Store中数据持久化生效},}
);

如下图所示（代码解释）：

4.测试pinia数据持久化

代码如下

1.Vue3的Templa模版代码

<template><div class="pinia-persist"><div class="pinia-persist-left">sessionStore定义的状态sessionCountTest：<div class="left">{{ sessionStoreInstance.sessionCountTest }}</div></div><div class="pinia-persist-center">sessionStore定义的计算属性sessionCountTest：<div class="center">{{ sessionStoreInstance.testComputed }}</div></div><div class="pinia-persist-right">sessionStore定义的Methods：<button@click="() => {sessionStoreInstance.addSessionCountTest();}">sessionCountTest+1</button> <button@click="() => {sessionStoreInstance.subSessionCountTest();}">sessionCountTest-1</button></div></div>
</template>

2.Vue3的script内代码

<script setup>
import { sessionStore } from "../../store/piniaPersistTest/index.js";
const sessionStoreInstance = sessionStore();
</script><style scoped>
.pinia-persist {display: flex;flex-direction: column;justify-content: center;align-items: flex-start;width: 100%;height: 230px;
}
.pinia-persist .center {margin-bottom: 20px;display: inline-block;background-color: antiquewhite;
}
.pinia-persist .left {margin-bottom: 20px;display: inline-block;background-color: rgb(213, 237, 190);
}
.pinia-persist .right {margin-top: 20px;display: inline-block;background-color: rgb(215, 239, 250);
}
</style>

测试结果如下图所示：

1.正常渲染的结果如下图

2.修改后，并刷新页面的结果图

三、关于pinia-plugin-persist插件的功能拓展

设置存储的key值

 persist: {enabled: true, strategies: [{key: 'user',//这个key就是在本地存储中的属性storage: localStorage,},],},

修改存储形式

 persist: {enabled: true, strategies: [{key: 'user',storage: localStorage, //可以选择对应的存储形式（localStorage或者sessionStroage）},],},

选择性存储对应字段（自定义状态的存储方式）

 persist: {enabled: true, strategies: [{ storage: sessionStorage, paths: ['存储字段名1', '存储字段名2'] },{ storage: localStorage, paths: ['存储字段名3'] },], },

总结

本文基本就结束了，基本没有什么特别大的难度，唯一比较不容易理解的地方可能在那个组合式Api声明仓库的部分

希望可以帮助到大家！！💪💪💪