vue3中使用pinia和localstorage保存登录信息
·
一、安装pinia:npm i pinia
二、在main.js中引入pinia
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
const app = createApp(App);
app.use(createPinia()); // 使用 Pinia
app.mount('#app');
三、创建一个stores/userStore.js文件
// stores/userStore.js
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({
userInfo: null, // 用来存储用户信息
}),
actions: {
// 从 localStorage 获取用户信息
loadUserInfo() {
const userInfo = localStorage.getItem('userInfo');
if (userInfo) {
this.userInfo = JSON.parse(userInfo);
}
},
// 设置用户信息,并保存到 localStorage
setUserInfo(userInfo) {
this.userInfo = userInfo;
localStorage.setItem('userInfo', JSON.stringify(userInfo)); // 保存到 localStorage
},
// 清除用户信息,并从 localStorage 移除
clearUserInfo() {
this.userInfo = null;
localStorage.removeItem('userInfo');
},
},
getters: {
isLoggedIn: (state) => !!state.userInfo, // 判断用户是否已登录
},
});
第四步:在A页面中保存登录信息
import { useUserStore } from '@/store';
const userStore = useUserStore()
userStore.setUserInfo({ "name": "eiwen111" })
第五步:在B页面中读取登录信息
import { useUserStore } from '@/store';
const userStore = useUserStore()
userStore.loadUserInfo()
console.log('userStore.userInfo', userStore.userInfo);
更多推荐


所有评论(0)