pinia的資料持久化的實作

vue3+pinia如何進行資料持久化操作呢？

文章目錄

• vue3+pinia如何進行資料持久化操作呢？
• 前言
• 一、通過pinia-plugin-persist插件來進行pinia的資料持久化操作
• 二、使用步驟
• • 1.首先下載下傳安裝插件
  • 2.在main.ts/main.js中引入
  • 3. 具體子產品中的使用看下面的代碼
• 總結

前言

對于大家而言，相信好多人都知道vuex做資料持久化的一種方式是通過vuex-persistedstate插件進而來實作的資料持久化，那pinia是如何實作資料持久化的呢？

一、通過pinia-plugin-persist插件來進行pinia的資料持久化操作

二、使用步驟

1.首先下載下傳安裝插件

代碼如下（示例）：

npm i pinia-plugin-persist --save --include=dev
// 或者使用 yarn 安裝
yarn add pinia-plugin-persist
           

2.在main.ts/main.js中引入

代碼如下（示例）：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from "pinia"
// 資料持久化插件
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)
const app = createApp(App)
app.use(pinia)
app.mount('#app')
           

3. 具體子產品中的使用看下面的代碼

import { defineStore } from "pinia";
export const useHome = defineStore('home', {
  state: ()=>{
    return {
      studyCourse: 0,
      num: 1,
      msg: '測試'
    }
  },
  persist: {
    enabled: true, // 開啟存儲
    // **strategies: 指定存儲位置以及存儲的變量都有哪些,該屬性可以不寫，不寫的話預設是存儲到sessionStorage裡邊，預設存儲state裡邊的所有資料**
    strategies:[
      { storage: localStorage, paths: ['studyCourse', 'num']}
      // storage 存儲到哪裡 sessionStorage/localStorage
      // paths是一個數組,要存儲緩存的變量,當然也可以寫多個
      // paths如果不寫就預設存儲state裡邊的所有資料，如果寫了就存儲指定的變量
    ]
  },
  actions: {
    addStudyCourse () {
      this.studyCourse++
    }
  },
})
           

總結

寫作不易不喜勿噴，歡迎大佬們進行指正。