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。定义仓库：修改状态的methods
    const 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+1button
      > <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声明仓库的部分

希望可以帮助到大家！！