在 NUXT 中使用 vue-apollo 从 Vuex 商店访问 this.$apollo？

Posted 2023-03-10

【中文标题】在 NUXT 中使用 vue-apollo 从 Vuex 商店访问 this.$apollo？

【英文标题】：Access to this.$apollo from Vuex store with vue-apollo in NUXT?

【发布时间】：2020-08-25 06:30:34

【问题描述】：

我想将来自登录的用户存储在 vuex 商店中的操作上。但是无法访问this.$apollo。

export const actions = 
  UPSERT_USER( commit ,  authUser, claims ) 
     this.$apollo
        .mutate(
          mutation: UPSERT_USER_MUTATION,
          variables: 
            id: user.uid,
            email: user.email,
            name: user.name,
            picture: user.picture,
          ,
        )
    

谢谢！

【参考方案1】：

因为我使用 nuxt apollo 插件在我的 nuxt apollo 插件中注入了 apolloProvider，

inject("apollo", apolloProvider);

然后在我的情况下，我使用它来访问它，

export default 
  actions: 
    foo (store, payload) 
        let apolloClient = this.$apollo.defaultClient
    
  

【参考方案2】：

你应该可以像这样访问它：

export default 
  actions: 
    foo (store, payload) 
      let client = this.app.apolloProvider.defaultClient
    
  

查看https://github.com/nuxt-community/apollo-module

【讨论】：

嗨，谢谢你的回答，它是这样工作的。问题是当调用突变时，onUserChange，this.app.apolloProvider 尚未定义。我用 1 秒的睡眠时间修复了它……但我认为这不是一个好主意。你知道如何在商店里等待 apolloProvider 准备就绪吗？然后执行 mutate()?

嗯，是的，睡一秒钟不是一个好主意。很难说，但我很确定你不是第一个与商店里的阿波罗打交道的人。试着搜索一下，可能你的解决方案就在外面等着你找到。我现在还真不知道 ;(

好的，谢谢。我正在使用 Firebase Nuxt 模块，该模块在用户登录时调用一个操作，但此时 apollo 提供程序尚未在商店中准备好。