如何在Pinia Store存储用户数据？结合@sidebase/nuxt-auth 0.6.0本地提供者

你的代码存在两个核心问题：

• useAuth() 被定义在 defineStore 外部，脱离了Vue/Pinia的响应式上下文，导致无法正确获取auth实例的状态
• 没有正确访问useAuth返回的data（它是一个Ref对象，需要通过.value获取值），也没有处理登录成功后的状态同步

下面是修正后的完整实现：

export const useUserStore = defineStore("user", () => {
  // 将useAuth()移到store内部，确保在响应式上下文里调用
  const { signIn, data: authData, signOut } = useAuth();
  const user = ref<any>({});

  // 监听auth数据变化，自动同步到Pinia的user状态（覆盖登录、自动登录、页面刷新场景）
  watch(authData, (newUserData) => {
    if (newUserData) {
      user.value = newUserData;
    }
  }, { immediate: true }); // immediate: true 确保初始化时就同步一次当前auth状态

  async function loginUser(credentials: { email_address: string; password: string }) {
    try {
      // 执行登录，获取返回结果
      const loginResponse = await signIn({
        email_address: credentials.email_address,
        password: credentials.password,
      });

      // 优先从登录响应取用户数据，没有则从authData同步
      if (loginResponse?.user) {
        user.value = loginResponse.user;
      } else if (authData.value) {
        user.value = authData.value;
      }
    } catch (error) {
      console.error("登录失败:", error);
      // 抛出错误让上层组件处理，比如显示错误提示
      throw error;
    }
  }

  async function logoutUser() {
    await signOut();
    user.value = {}; // 登出后清空Pinia中的用户数据
  }

  // 权限相关getter示例
  const isAdmin = computed(() => user.value?.role === "admin");

  return { user, loginUser, logoutUser, isAdmin };
});

关键说明： #

1. useAuth()的位置：必须放在defineStore的setup函数内部，这样才能获取到正确的Nuxt Auth实例，保证响应式状态正常工作。
2. 自动同步状态：通过watch监听authData的变化，不仅能在主动登录时同步用户数据，还能处理页面刷新、自动登录等场景下的状态同步。
3. 正确访问Ref值：authData是Ref类型，必须通过.value获取内部值；如果后端在登录接口返回了用户数据，也可以直接从signIn的响应中提取。
4. 错误处理：不要忽略try/catch的错误，抛出错误后上层组件可以根据情况显示登录失败提示。

修改后，用户数据会正确同步到Pinia的user状态中，你可以通过useUserStore().user在组件或其他store中访问用户信息，权限相关的getter也能正常工作。

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