pinia的持久化存储

1.安装pinia持久化插件

npm i pinia-plugin-persist -S

src/stores/index.js文件

import { createPinia } from 'pinia';
import piniaPluginPersist from 'pinia-plugin-persist'; // 引入持久化插件
const pinia = createPinia();
pinia.use(piniaPluginPersist);// 使用该插件
export default pinia;

src/stores/user.js文件

import { defineStore } from 'pinia';

const useUserStore = defineStore('user', {
    state: () => {
        return {
            token: '',
            // 用户信息
            userInfo: {}
        };
    },
    // 开启数据缓存
    persist: {
        enabled: true,
        strategies: [
            {
                key: 'login_user', // key的名称
                storage: localStorage, // 存储的位置，默认为 sessionStorage
                paths: ['token', 'userInfo'] // 可以选择哪些进入local存储，默认是全部进去存储
            }
        ]
    },

    getters: {},
    actions: {
        setToken(payload) {
            this.token = payload;
        },
        setUserInfo(payload) {
            this.userInfo = payload;
        }
    }
});
export default useUserStore;

main.js中注册pinia

import { createApp } from 'vue';
import App from './App.vue';
import pinia from './stores';
import router from './router';
import './configs/permission';

createApp(App).use(pinia).use(router).mount('#app');

完成以上这个步骤，无论用什么姿势刷新页面，数据都不会被清空。