脚本宝典收集整理的这篇文章主要介绍了

如何优雅的在Vue Project中使用vue-apollo

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

首先我们来熟悉下graphql的工作机制

一个GraphQL查询可以包含一个或者多个操作(operation),类似于一个RESTful API。操作(operation)可以使两种类型:查询(Query)或者修改(mutation)。我们看一个例子:

`query {   client(id: 1) {     id      name   } }`    

那么问题来了,我们已经用熟了axios或者fetch 再或者ajax来进行数据的交互,如:

getRecommdBook (type) {       this.axios.get(`/books/web/recommendation-api/recommendation/official?type=${type}`)         .then(res => {           if (res.data) {             this.recommdBookfun(res.data)             console.log(this.recommdBook)           }         })         .catch(err => {           console.log(err)         })     }, 

怎样以我们熟悉的形式来运用apollo,使查询更加简便呢

首先我们先在vue项目中引用apollo-vue(apollo非亲生儿子) 作者是Guillaume Chau(vue的开发团队人员)

githttps://github.com/Akryum/vue...

npm install --save vue-apollo apollo-client

main.js引用

// apollo配置      import { ApolloClient, createNetworkInterface } from 'apollo-client'     import VueApollo from 'vue-apollo'

构建客户端
可以构建多个适应不同接口

    const networkInterfaceTask = createNetworkInterface({       uri: '/api/tasks/graphql',       transportBatching: true,       opts: {         credentials: 'include'       }     })          const apolloClientTask = new ApolloClient({       networkInterface: networkInterfaceTask,       connectToDevTools: true     })          const apolloProvider = new VueApollo({       clients: {         task: apolloClientTask       },       defaultClient: apolloClientTask     })

使用apollo

Vue.use(VueApollo) 

根目录引用

new Vue({   el: '#app',   router,   axios,   store,   apolloProvider,   template: '<App/>',   components: { App } })

好到此为止,基础配置就已经ok了
接下来就是实际的请求了
在vue 的组件中,比如 test.vue

我们的例子是带参数的查询
首先在组件里构建查询的变量

import gql from 'graphql-tag'  const getErSeasons = gql`query erSeasons($classId: Long!) {                             erSeasons{                               id                               name                               startTime                               endTime                               classTask(class:$classId){                                 id                                 classId                                 startTime                                 endTime                                 status                               }                             }                           }`

不懂的话先去查下教程api
然后在methods里面

 changeClass (id) {       this.ClassSeasons = []       this.Select = id       console.log(this.$apollo.query)       this.$apollo.query({         query: getErSeasons,         variables: {           classId: this.Select         }       })         .then(res => {           this.Parse(res.data.erSeasons)           console.log(res)         })         .catch(err => {           console.log(err)         })     }      这个形式是不是有点熟悉了。哈哈哈 可以了。以后就又可以愉快的装逼了 本文章只适于初学者  作者:考拉阅读前端工程师 

总结

以上是脚本宝典为你收集整理的

如何优雅的在Vue Project中使用vue-apollo

全部内容,希望文章能够帮你解决

如何优雅的在Vue Project中使用vue-apollo

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过