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

【问题标题】：Access to this.$apollo from Vuex store with vue-apollo in NUXT?在 NUXT 中使用 vue-apollo 从 Vuex 商店访问 this.$apollo？
【发布时间】：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,
          },
        })
    }

谢谢！

【问题讨论】：

标签： vue.js vuex nuxt.js apollo-client vue-apollo

【解决方案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 提供程序尚未在商店中准备好。