通过 Pinia 操作的 Http GET 请求仅在 Nuxt 应用程序中第二次尝试时有效

Question

我在 Nuxt 3 应用程序中使用 Pinia，并尝试在用户登录时通过 useFetch 发出 GET 请求。该请求使用 Nuxt 的服务器并调用 SupaBase 托管数据库，以便我可以获得用户名，这些是实时的在与 Supabase 的 auth 表分开的用户表中。然后我将结果存储在 Pinia 全局状态中。

由于某种原因，该请求仅在我第二次发出请求时才有效，即。当我点击登录后的第二个页面后，我第一次无法使其工作。

向 Nuxt API 发出请求的操作函数（如下所示）位于 Pinia AuthStore.js 文件中，并通过 NavBar 组件进行调用。这意味着在我的 Nuxt 应用程序的每个页面上，都会调用该函数。展望未来，我应该能够通过将其存储在本地存储中来避免不必要的调用（加载新页面时，Pinia 状态会重置），但一旦完成此初始请求，我就会对其进行设置。

当我通过 Postman 测试此调用时，它第一次就可以工作，即。返回了正确的结果，因此看来请求设置正确。我怀疑这个问题可能与 Nuxt 的缓存有关，但无法弄清楚为什么它只在应用程序中第二次起作用。

这是 AuthStore.js 中的相关代码 - 当我在 Nuxt 中运行此代码时，我在第一个请求上没有得到任何数据，在第二个请求上得到正确的数据：

export const useAuthStore = defineStore('AuthStore', {
   state: () => {
      return {
         loggedIn: null,
         user: null,
         username: null,
      }
   },
   actions: {
      async loadUserName() {
         if (this.loggedIn) {
            const { data, error } = await useFetch(
               '/api/user/get-user',
               {
                  params: {
                     userId: this.user.id,
                  },
               }
            )
            if (error) {
               console.log('E:', error)
            }
            if (data.value) {
               this.username = data.value.user_name
            } else {
               console.log('No data')
            }
         }
      },
   },
})

编辑：我需要这个来处理第一个请求，因为我想向用户显示一个按钮来在用户登录时注册用户名。这应该在他们登录后立即显示，而不是在他们单击其他页面时显示。

Answer 1

解决了！尽管使用 async/await，但无法通过 wait 获得数据，这与响应的 SSR 性质有关 - 请参阅useFetch() 响应值不可访问

访问响应数据的唯一方法是通过拦截器 - 这是通过回调完成的，该回调无法通过此回调访问 Pinia 状态，因此我需要在商店中调用来访问/设置它。

最终看起来像这样：

await useFetch('/api/user/get-user', {
   params: {
      userId: this.user.id,
   },
   onResponse({ response }) {
      const AuthStore = useAuthStore()

      if (response._data) {
         AuthStore.username =
            response._data.user_name
      } else {
         console.log('No data')
      }
   },
   onResponseError({ request, response }) {
      // log error here
   },
})