# 在 Vue 组件中的用法

在你的应用程序中安装了 vue-apollo 之后,所有组件都可以通过 apollo 这一特殊选项来使用 Apollo。

# apollo 选项

要在你的 Vue 组件中声明 apollo 查询,在组件的选项中添加 apollo 对象:

new Vue({
  apollo: {
    // Apollo 的具体选项
  },
})

在一个 .vue 文件中:

<template>
  <div>My component</div>
</template>

<script>
export default {
  apollo: {
    // Vue-Apollo 选项放在这里
  }
}
</script>

# $apollo

在一个有着 apolloProvider 选项的组件之下的所有组件都可以使用一个 $apollo 辅助函数。这是你的组件和 Apollo 之间的胶水层,它可以为你完成所有繁重的工作(包括自动更新和销毁)。

在你的每个 vue 组件中,你都可以通过 this.$apollo.provider.defaultClientthis.$apollo.provider.clients.<key>(用于 多客户端)来访问 apollo-client (opens new window) 实例。

如果你很好奇,请查看 $apollo API

# 查询(Queries)

为每个你需要通过 Apollo 的查询结果提供数据的 Vue 属性,在 apollo 对象中添加一个对应属性。

<template>
  <div>{{ hello }}</div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    // 简单的查询,将更新 'hello' 这个 vue 属性
    hello: gql`query {
      hello
    }`,
  },
}
</script>

请查看 查询 一章以了解更多。

# 变更(Mutations)

使用 this.$apollo.mutate 发送变更语句:

methods: {
  async addTag() {
    // 调用 graphql 变更
    const result = await this.$apollo.mutate({
      // 查询语句
      mutation: gql`mutation ($label: String!) {
        addTag(label: $label) {
          id
          label
        }
      }`,
      // 参数
      variables: {
        label: this.newTag,
      },
    })
  }
}

请查看 变更 一章以了解更多。

# 特殊选项

apollo 对象中的特殊选项以 $ 开头表示。

请查看 特殊选项 一章以了解更多。

上次更新时间: 2019/11/12 下午7:18:18