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');
完成以上这个步骤,无论用什么姿势刷新页面,数据都不会被清空。