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++
}
},
})
总结
写作不易不喜勿喷,欢迎大佬们进行指正。