一、安装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);

更多推荐