pinia持久化储存

持久化插件pinia-plugin-persist

安装及引用

npm i pinia-plugin-persist --save

在main.js中引用

此处有个疑惑，使用红色部分引入有效，但使用黄色部分引入无效，知道的同学可以解答一下吗

/**导入App组件*/
import App from './App.vue'
/**导入vue*/
import {createApp} from 'vue'
/**导入路由*/
import router from './router'
/**引入全局变量管理pinia*/
import {createPinia} from "pinia";
import piniaPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPersist)
// createPinia().use(piniaPersist)
/**引入全局样式*/
import './style/index.scss'
/**引入element-plus*/
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App)  //实例化App组件
    .use(router)  //挂载路由
    .use(store)  //引入状态管理
    // .use(createPinia())
    .use(ElementPlus)  //使用elementPlus
    .mount('#app')  //挂载App组件

编写代码

创建一个状态管理文件，以下为我的例子：

import {defineStore} from "pinia";

export const useMenuHistoryStore = defineStore('menuHistory', {
    state: () => {
        return {
            menuHistoryList: []
        };
    },
    persist:{
        enabled: true,
        strategies:[{
            key:'menuHistory',//在存储位置的key值
            storage:sessionStorage,// 存储的位置是localStorage，也可以是sessionStorage
            paths:['menuHistoryList']//state中的字段，写哪些存入哪些，不写则存入所有的
        }]
    }
})

strategies是个数组，意味着里面可以有多个对象，举个例子，state中的数据有些需要储存在localStorage中有些需要储存在sessionStorage中，那就可以在strategies中写两个对象，分别命名写入不同的储存位置和需要储存的字段
使用

使用

在要使用的文件中导入刚刚创建的store文件

import {useMenuHistoryStore} from "../../store/menuHistory";

看看sessionStorage中的内容：