Vue3 Pinia无法从Store获取数据问题求助

问题根源 #

核心问题是登录操作是异步的，但你调用登录方法后立刻跳转到Dashboard，此时后端API请求还未完成，userId还没被赋值到Pinia Store中，所以Dashboard组件加载时拿到的是初始的null值。

解决方案 #

1. 修改Pinia Store的login方法，返回Promise #

让login方法返回axios请求的Promise，允许调用方等待请求完成后再执行后续操作：

// Stores/user.js
import { defineStore } from 'pinia'
import axios from 'axios'

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    userId: null,
  }),
  actions: {
    login({ email, password }) {
      // 返回Promise，让调用方可以等待请求结束
      return axios.post('/user/login', { email, password })
        .then((res) => {
          console.log('res', res.data.userId)
          this.userId = res.data.userId
        })
        .catch((error) => {
          alert('error')
          // 抛出错误，方便调用方捕获处理
          throw error
        })
    },
  }
})

2. 修改Login组件，等待登录完成后再跳转 #

使用async/await等待登录请求完成，确保userId已存入Store后再跳转：

<!-- Login.vue -->
<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router';

const email = ref('');
const password = ref('');

const userStore = useUserStore();
const router = useRouter();

const login = async () => {
  try {
    // 等待登录请求完成
    await userStore.login({ email: email.value, password: password.value });
    // 登录成功后再跳转至Dashboard
    router.push('/dashboard');
  } catch (err) {
    console.error('登录失败', err);
  }
}
</script>

3. 优化Dashboard组件的响应式访问（可选） #

使用Pinia的storeToRefs解构state属性，这是Vue+Pinia的响应式最佳实践：

<!-- Dashboard.vue -->
<template>
    <div id="dashboard">
        <div class="row">
            <div class="col-md-4">
                <Header />
                {{ userId }}
            </div>
        </div>
    </div>
</template>

<script setup>
import Header from './Header.vue'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
// 解构出响应式的userId属性
const { userId } = storeToRefs(userStore)
</script>

验证 #

完成修改后，点击登录按钮会等待API请求完成再跳转，此时Dashboard就能正确显示userId了。

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