Pinia持久化存储

前言

今天给大家分享的是Pinia持久化存储，本文主要以插件的方式来实现持久化存储

插件

1. 安装插件

npm i pinia-plugin-persist --save
或
yarn add pinia-plugin-persist --save

2. 目录改造

创建：src/store/index.js

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store

改造：src/main.js

import store from './store'
app.use(store)

创建：src/store/user.js

• 1.开启数据缓存, persist
• 2.默认 sessionStorage 存储，并会以store的id作为key
• 3.默认存储所有state的数据

import { defineStore } from 'pinia'
const userStore = defineStore('USER', {
    state: () => ({ 
        age: 18,
        nickName: "张三"
    }),
    getters: {
        changeAge() {
            return this.age + 10
        }
    },
    actions: {
        upAge(val) {
            this.age += val
        }
    },
    // 开启数据缓存
    persist: {
        enabled: true
    }
})

自定义存储方式和自定义key

import { defineStore } from 'pinia'
const userStore = defineStore('USER', {
    state: () => ({ 
        age: 18,
        nickName: "张三"
    }),
    getters: {
        changeAge() {
            return this.age + 10
        }
    },
    actions: {
        upAge(val) {
            this.age += val
        }
    },
    // 开启数据缓存
    persist: {
        enabled: true，
        strategies: [{
            key: 'my_user',
            storage: localStorage
        }]
    }
})

自定义存储数据

import { defineStore } from 'pinia'
const userStore = defineStore('USER', {
    state: () => ({ 
        age: 18,
        nickName: "张三"
    }),
    getters: {
        changeAge() {
            return this.age + 10
        }
    },
    actions: {
        upAge(val) {
            this.age += val
        }
    },
    // 开启数据缓存
    persist: {
        enabled: true，
        strategies: [{
            key: 'my_user',
            storage: localStorage，
            paths: ['age']
        }]
    }
})

PiniaPluginPersist 官网

最后：如果伙伴觉得写的不好，希望大家多见谅！如果觉得还可以，对你有帮助的话，可以点个赞，支持一下哦！