markdown 在Vuex中使用apollo的最佳实践

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown 在Vuex中使用apollo的最佳实践相关的知识,希望对你有一定的参考价值。

You can access the apollo clients in Nuxt Vuex via `this`. For instance:

```
export default {
  actions: {
    foo (context) {
      let client = this.app.apolloProvider.defaultClient
    }
}
```

If you wanted to make an Apollo call via a page's `asyncData`, it'd look something like this:

```
asycData (context) {
  let client = context.app.apolloProvider.defaultClient
}
```

Notice, in `asyncData`, the `app` is assigned to `context`. That is not the case in the store. Worth noting, `app` is assigned to `context` in `nuxtServerInit`. For example:

```
nuxtServerInit (store, context) {
  let client = context.app.apolloProvider.defaultClient
}
```

Lastly, to access Apollo clients in a component method (say, for browser-only functionality), you'd do it this way:

```
methods: {
  foo () {
    let client = this.$apollo.provider.defaultClient
  }
}
```

Those are probably the four likely ways you'll need to be accessing Apollo. Unfortunately, they're four *different* ways, but they are somewhat justified. I would recommend this be documented somewhere, as it is kind of confusing, and takes some trial and error of logging to console and inspecting vars to figure this out.

以上是关于markdown 在Vuex中使用apollo的最佳实践的主要内容,如果未能解决你的问题,请参考以下文章

使用 Apollo 和 GraphQL 缓存而不是 Vuex?

我可以使用 Nuxt Apollo 本地状态来完全替换 Vuex 吗?

如何用 apollo 客户端状态管理替换 vuex?

Vuex 状态随突变而变化 - apollo graphql 查询

来自 Vuex 的 Apollo 请求

使用 nuxt-apollo 时如何使用 GraphQL 查询?