Vue3 pinia persistent storage (combined Api case demonstration)

pinia-plugin-persist (pinia persistence plugin)

This article uses a combined Api method to demonstrate Pinia's persistent storage

If you still don’t know much about the persistence of pinia?｜?, you can read the author’s previous article, or go to the official website to check it out! ! ! ! ! !

Click me to jump to the combined Api declaration warehouse

Article directory

  • pinia-plugin-persist (pinia persistence plugin)
  • Persistent storage:
  • 1. Why do you need persistent data storage?
  • 2. The steps to use pinia-plugin-persist are as follows
    • 1. Import library
      • code show as below:
      • The installation result is shown in the figure below:
    • 2. Register the pinia-plugin-persist plugin on Pinia
      • code show as below
      • As shown in the figure below (operation explanation)
    • 3. Declare test store (combined Api)
      • Combined statement Store article (students who don’t know how to combine Api points)
      • code show as below:
      • As shown in the figure below (code explanation):
    • 4. Test pinia data persistence
      • code show as below
        • 1. Templa template code of Vue3
        • 2. The code in the script of Vue3
      • The test results are shown in the figure below:
  • 3. About the function expansion of pinia-plugin-persist plug-in
    • Set the stored key value
    • Modify storage form
    • Optionally store corresponding fields (custom state storage method)
  • Summarize

Persistent storage:

Most students who have used Vuex have a certain understanding of Vuex's persistent data storage.

Persistent data storage: As the name implies, it stores data permanently to prevent data loss caused by page refresh! ! !

1. Why do we need persistent data storage?

As mentioned above: the main purpose is to prevent the page from being refreshed, resulting in the loss of existing data.

Data can also be stored persistently without using a warehouse. For example: sessionStroage or localStroage can be used for persistent storage of data.

The essence of the pinia-plugin-persist plug-in is also realized through the local storage of the browser!

2. The steps to use pinia-plugin-persist are as follows

1. Import library

The code is as follows:

//Execute the following code on the console:
 npm i pinia-plugin-persist

The installation result is shown in the figure below:

According to common sense, it can be installed successfully. If the installation is not successful, try to switch the npm source to solve the problem.

2. Register the pinia-plugin-persist plugin on Pinia

The code is as follows

import {<!-- --> createApp } from 'vue'

import {<!-- -->createPinia} from 'pinia'
//1. Introduce the piniaPersist persistence plugin
import piniaPersist from 'pinia-plugin-persist'
import App from './App.vue'

const pinia = createPinia()
//2. Register piniaPersist in Pinia
pinia. use(piniaPersist)

const app = createApp(App)
app.use(pinia)
app.mount('#app')

As shown in the figure below (operation explanation)

3. Declaration test store (combined Api)

Combined statement Store article (students who don’t know the combined Api point)

Pinia warehouse declaration method

The code is as follows:

import {<!-- --> defineStore } from "pinia";
import {<!-- --> ref, computed } from "vue";

export const sessionStore = defineStore(
  "sessionStore",
  () => {<!-- -->
    //1. Defining a warehouse: status
    const sessionCountTest = ref(0);

    //2. Defining a repository: computed properties
    const testComputed = computed(
      () => `Computed property: $$$$$----${<!-- -->sessionCountTest.value}----$$$$$`
    );

    //3. Define the warehouse: methods to modify the state
    const addSessionCountTest = () => {<!-- -->
      sessionCountTest.value++;
    };
    const subSessionCountTest = () => {<!-- -->
      sessionCountTest.value--;
    };
    // 4. Export state
    return {<!-- -->
      sessionCountTest,
      testComputed,
      addSessionCountTest,
      subSessionCountTest,
    };
  },
  {<!-- -->
    persist: {<!-- -->
      enabled: true, //Data persistence in Store takes effect
    },
  }
);

As shown in the figure below (code explanation):

4. Test pinia data persistence

The code is as follows

1. Templa template code of Vue3

<template>
  <div class="pinia-persist">
    <div class="pinia-persist-left">
      The state sessionCountTest defined by sessionStore:
      <div class="left">{<!-- -->{ sessionStoreInstance.sessionCountTest }}</div>
    </div>
    <div class="pinia-persist-center">
      The computed property sessionCountTest defined by sessionStore:
      <div class="center">{<!-- -->{ sessionStoreInstance. testComputed }}</div>
    </div>
    <div class="pinia-persist-right">
      Methods defined by sessionStore:
      <button
        @click="
          () => {
            sessionStoreInstance. addSessionCountTest();
          }
        ">
        sessionCountTest + 1</button
      > <button
        @click="
          () => {
            sessionStoreInstance. subSessionCountTest();
          }
        ">
        sessionCountTest-1
      </button>
    </div>
  </div>
</template>

2. The code in the script of Vue3

<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>

The test results are shown in the figure below:

1. The result of normal rendering is as follows

2. After the modification, refresh the result map of the page

3. About the function expansion of the pinia-plugin-persist plugin

Set the stored key value

 persist: {<!-- -->
      enabled: true,
       strategies: [
      {<!-- -->
        key: 'user', // this key is an attribute in local storage
        storage: localStorage,
      },
    ],
   },

Modify storage format

 persist: {<!-- -->
      enabled: true,
       strategies: [
      {<!-- -->
        key: 'user',
        storage: localStorage, //You can choose the corresponding storage form (localStorage or sessionStroage)
      },
    ],
   },

Selectively store the corresponding field (the storage method of the custom state)

 persist: {<!-- -->
      enabled: true,
       strategies: [
      {<!-- --> storage: sessionStorage, paths: ['storage field name 1', 'storage field name 2'] },
      {<!-- --> storage: localStorage, paths: ['storage field name 3'] },
    ],
   },

Summary

This article is basically over, and there is basically no great difficulty. The only place that is not easy to understand may be the part of the combined Api declaration warehouse

Hope it can help everyone! !