akoo/akmon

Fork 0

Files

akoo 77a2bab985 Initial commit of akmon project

2026-01-20 08:04:15 +08:00

5.4 KiB

Raw Permalink Blame History

Profile 页面 State 绑定更新文档

📋 更新概述

已将 pages/sport/student/profile.uvue 页面的用户信息与全局 state.userProfile 绑定，实现了数据的统一管理和同步。

🔧 主要修改

1. 导入 Store 模块

import { state, setUserProfile } from '@/utils/store.uts'

2. 更新用户信息获取逻辑

`getUserName()` 函数

优先级：state.userProfile.username > userInfo.value.username > 默认值
改进：优先从全局状态获取用户名，确保数据一致性

`getUserId()` 函数

优先级：state.userProfile.id > userInfo.value.id > 默认值
改进：统一使用 state.userProfile.id，而不是 student_id 字段

`getCurrentUserId()` 函数

优先级：state.userProfile.id > supaClient.getSession() > 本地存储
改进：增加了对全局状态的检查，提高获取用户ID的可靠性

3. 用户资料加载策略

`loadUserProfile()` 函数重构

const loadUserProfile = async () => {
  // 1. 优先使用 state.userProfile 填充界面（快速显示）
  if (state.userProfile && state.userProfile.id) {
    userInfo.value = {
      id: state.userProfile.id,
      username: state.userProfile.username || '',
      email: state.userProfile.email || '',
      avatar_url: state.userProfile.avatar_url || '',
      created_at: new Date().toISOString()
    }
    
    if (state.userProfile.avatar_url) {
      userAvatar.value = state.userProfile.avatar_url
    }
  }
  
  // 2. 从数据库获取最新数据并同步到 state
  const result = await supaClient.from('ak_users')...
  
  // 3. 更新全局状态
  setUserProfile(updatedProfile)
}

优势：

✅ 快速显示：优先使用缓存的用户信息
✅ 数据同步：从数据库获取最新数据更新全局状态
✅ 一致性：确保界面和全局状态保持同步

4. 头像更新优化

`changeAvatar()` 函数增强

const changeAvatar = () => {
  uni.chooseImage({
    success: async (res) => {
      const tempFilePath = res.tempFilePaths[0]
      userAvatar.value = tempFilePath
      
      // 同步更新 state.userProfile
      if (state.userProfile) {
        const updatedProfile = { ...state.userProfile }
        updatedProfile.avatar_url = tempFilePath
        setUserProfile(updatedProfile)
      }
      
      // 更新数据库
      await supaClient.from('ak_users')
        .update({ avatar_url: tempFilePath })...
    }
  })
}

改进：

✅ 双向同步：同时更新界面、全局状态和数据库
✅ 即时反馈：立即更新界面显示
✅ 数据持久化：保存到数据库确保数据不丢失

5. 登出逻辑优化

`logout()` 函数增强

const logout = () => {
  uni.showModal({
    success: async (res) => {
      if (res.confirm) {
        await supaClient.signOut()
        
        // 清空全局状态
        setUserProfile({ username: '', email: '' })
        
        uni.reLaunch({ url: '/pages/index/index' })
      }
    }
  })
}

改进：

✅ 状态清理：退出时清空全局用户状态
✅ 彻底登出：确保用户信息完全清除

🏗️ 数据流架构

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   界面显示      │◄───│  state.userProfile │◄───│   数据库        │
│  (profile.uvue) │    │   (全局状态)      │    │  (ak_users)     │
└─────────────────┘    └──────────────────┘    └─────────────────┘
        ▲                        ▲                        ▲
        │                        │                        │
        │  ┌─────────────────────┼────────────────────────┘
        │  │                     │
        │  │              同步更新操作
        │  │         (头像更新、资料修改等)
        └──┼─────────────────────┘
           │
    快速界面渲染
  (使用缓存的用户信息)

✅ 预期效果

性能提升：优先使用缓存数据，减少数据库查询延迟
数据一致性：统一的用户信息来源，避免数据不同步
用户体验：快速显示用户信息，后台同步最新数据
状态管理：标准化的全局状态使用模式
扩展性：为其他页面使用相同的用户信息提供基础

🔍 测试验证

建议测试以下场景：

页面首次加载用户信息显示
头像更新后的界面和状态同步
用户登出后状态清理
网络异常时的降级处理
多页面间用户信息的一致性

📝 注意事项

类型安全：保持 UserProfile 类型定义与数据库字段的一致性
错误处理：网络异常或数据库错误时的优雅降级
缓存策略：合理使用缓存，避免显示过期信息
状态更新：确保所有用户信息修改都同步到全局状态

更新完成时间：2025-06-12
影响文件：pages/sport/student/profile.uvue
兼容性：向后兼容，不影响现有功能

5.4 KiB Raw Permalink Blame History Unescape Escape