Vue+Pinia按钮需点击两次才更新状态，如何获取实时响应式变量？

核心问题原因 #

你的代码中存在异步操作未正确等待的问题：

• loginUser 和 get_user_data 都是异步函数，但在 on_click 中调用时没有使用 await，导致后续的 console.log 会在 API 请求完成前执行，此时 token 和 user_data 还未更新。
• get_user_data 依赖 localStorage 获取 token，但 $subscribe 是在状态变更后才写入 localStorage，第一次调用时 localStorage 还没有最新的 token。
• 仓库中 login_and_get_user_data 存在语法错误，且混合使用 .then() 和 async/await 导致逻辑混乱。

分步修复 #

1. 修复组件中的异步流程

修改 LoginForm.vue 的 on_click 方法，确保等待异步操作完成后再访问状态：

async on_click() {
    var data = new FormData();
    data.append('email', this.email);
    data.append('password', this.password);

    const store = useUsers()
    // 等待登录完成
    await this.loginUser(data)
    // 等待用户数据获取完成
    await this.get_user_data()
    
    const { token, user_data } = storeToRefs(store)
    console.log(token.value)
    console.log(user_data.value) // 无需使用 toRaw，直接访问即可
}

2. 修复仓库中的 get_user_data 方法

直接使用仓库内的 token，而非依赖 localStorage：

async get_user_data() {
    // 直接使用 store 中的 token，无需从 localStorage 读取
    axios.defaults.headers.common['user-token'] = this.token

    let response = await axios.get("users/user")
    this.user_data = response.data.user
}

3. 修复仓库中的语法错误与异步逻辑

修正 login_and_get_user_data 的语法错误，并用 async/await 重构：

async login_and_get_user_data(data) {
    try {
        const loginResponse = await axios.post("users/login", data)
        this.token = loginResponse.data.token
        axios.defaults.headers.common['user-token'] = this.token
        
        const userResponse = await axios.get("users/user")
        this.user_data = userResponse.data.user
    } catch (error) {
        console.error('登录或获取用户数据失败:', error)
        throw error
    }
}

4. 初始化仓库时从 localStorage 恢复状态

在仓库的 state 初始化中加入 localStorage 读取，确保页面刷新后状态不丢失：

state: () => ({
    token: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).token : null,
    user_data: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).user_data : null
}),

Vue/Pinia 新手通用实践 #

• 统一异步代码风格：尽量使用 async/await 替代 .then()，避免混合写法，提升代码可读性。
• 状态持久化规范：通过仓库的 $subscribe 写入 localStorage，同时在初始化时读取恢复状态，确保状态一致性。
• 错误处理：所有异步操作都要添加 try/catch，并在组件中处理错误（比如提示用户登录失败）。
• 避免混合 API：如果是新手，建议优先选择 Composition API（全用 setup）或 Options API（全用 data/methods），不要混合使用，减少理解成本。
• 不要滥用 toRaw：只有在需要获取原始对象而非响应式代理时才使用，日常打印或访问状态直接用 .value 即可。
• 单一职责原则：仓库的每个 action 尽量只做一件事（比如 loginUser 只负责登录，get_user_data 只负责获取用户信息），便于维护和测试。

内容的提问来源于stack exchange，提问作者Cooder