pinia持久化-【pinia-plugin-persist】

下载

npm i -S pinia-plugin-persist

main.js中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

const app = createApp(App)

// 引入vue-router
import router from "@/router";
app.use(router)

// 引入element-plus
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

// 引入pinia
import { createPinia } from "pinia"
//pinia 持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
app.use(store)

// 引入echarts
import "echarts";
import ECharts from 'vue-echarts'
app.component('v-chart', ECharts)

app.mount('#app')

 使用：

    // 使用该插件，开启数据缓存
    persist: {
        //这里存储默认使用的是sessionStorage
        enabled: true,
        strategies: [
            {
                //key的名称
                key: 'my_user',
                //更改默认存储，我更改为localStorage
                storage: localStorage,
                // 可以选择哪些进入local存储，这样就不用全部都进去存储了
                // 默认是全部进去存储。若path为[]，则表示不缓存任何数据
                // paths: []
            }
        ]
    }

 效果：