pinia的数据持久化的实现

vue3+pinia如何进行数据持久化操作呢？

---

前言

对于大家而言，相信好多人都知道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++
    }
  },
})

---

总结

写作不易不喜勿喷，欢迎大佬们进行指正。