在Vue 3 + TypeScript中管理响应式全局状态：Pinia实践指南

// main.ts
import { auth } from './firebase'; // 假设的Firebase auth实例

export var userInfo: any = {}; // 导出空对象

auth.onAuthStateChanged(async (user) => {
    if (user) {
        // 假设 getUserInfo() 异步获取用户详细信息
        userInfo = await getUserInfo(user.uid);
    } else {
        userInfo = {};
    }
});

npm install pinia
# 或者
yarn add pinia

// src/main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia(); // 创建Pinia实例

app.use(pinia); // 将Pinia注册到Vue应用

app.mount('#app');

// src/stores/user.ts
import { defineStore } from 'pinia';
import { auth, getUserInfo } from '@/firebase'; // 假设的Firebase auth实例和getUserInfo函数

// 定义用户信息接口，增强类型安全性
interface UserInfo {
  uid: string | null;
  email: string | null;
  // 根据实际情况添加更多用户属性
  displayName?: string | null;
}

export const useUserStore = defineStore('user', {
  // state: 定义Store的响应式状态
  state: () => ({
    userInfo: { uid: null, email: null } as UserInfo, // 初始用户数据
    isAuthChecked: false, // 标记认证状态是否已初始化检查
  }),

  // getters: 定义计算属性，用于从state派生新数据
  getters: {
    isAuthenticated: (state) => !!state.userInfo.uid, // 判断用户是否已登录
  },

  // actions: 定义用于修改state的异步或同步方法
  actions: {
    // 异步获取用户详细信息并更新状态
    async fetchUserInfo(uid: string) {
      if (!uid) {
        this.userInfo = { uid: null, email: null };
        return;
      }
      try {
        const info = await getUserInfo(uid); // 假设 getUserInfo 返回 UserInfo 类型
        this.userInfo = info;
      } catch (error) {
        console.error("Failed to fetch user info:", error);
        this.userInfo = { uid: null, email: null };
      }
    },

    // 初始化Firebase认证状态监听器
    initAuthListener() {
      // 确保监听器只设置一次
      if (this.isAuthChecked) return;

      auth.onAuthStateChanged(async (user) => {
        if (user) {
          // 用户登录或已登录
          await this.fetchUserInfo(user.uid);
        } else {
          // 用户登出
          this.userInfo = { uid: null, email: null };
        }
        this.isAuthChecked = true; // 标记认证状态已检查
      });
    },

    // 登出操作
    async logout() {
      try {
        await auth.signOut();
        this.userInfo = { uid: null, email: null };
        // 登出后可能需要重定向
      } catch (error) {
        console.error("Failed to log out:", error);
      }
    }
  },
});

// src/main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { useUserStore } from './stores/user'; // 导入用户Store

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);

// 在Pinia实例创建后，获取userStore并初始化认证监听器
const userStore = useUserStore();
userStore.initAuthListener(); // 在应用启动时调用一次

app.mount('#app');

<!-- src/components/UserProfile.vue -->
<template>
  <div class="user-profile">
    <p v-if="!isAuthChecked">正在加载用户信息...</p>
    <div v-else-if="isAuthenticated">
      <h2>欢迎，{{ userInfo.displayName || userInfo.email }}！</h2>
      <p>UID: {{ userInfo.uid }}</p>
      <button @click="logout">登出</button>
    </div>
    <div v-else>
      <p>您尚未登录。</p>
      <!-- 可以添加登录按钮或链接 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user';

// 获取userStore实例
const userStore = useUserStore();

// 使用 storeToRefs() 解构响应式状态，保持响应性
const { userInfo, isAuthenticated, isAuthChecked } = storeToRefs(userStore);

// 直接从store实例访问actions
const { logout } = userStore;

// 组件的其他逻辑...
</script>

<style scoped>
.user-profile {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin: 20px;
}
</style>