您好,登錄后才能下訂單哦!
vue-apollo怎么在vue-cli中使用?針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
1、首先我們需要安裝一下vue-apollo 具體執(zhí)行命令如下:
復(fù)制代碼 代碼如下:
npm install –save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
2、在我們的項(xiàng)目的根目錄下創(chuàng)建一個(gè)vueApollo.js文件具體配置如下:
import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; import VueApollo from 'vue-apollo'; const httpLink = new HttpLink({ uri: './v1/assess/api', /* 其中./v1是我在vue的config中配置時(shí)解決跨域時(shí)起的代理一個(gè)名字,后面的是后端 暴露接口方法的地址 */ credentials: 'same-origin', /* 這個(gè)屬性的意思是在同源的情況下攜帶cookie,因?yàn)関ue-apollo本身發(fā)送的是一個(gè)fetch請(qǐng)求,所以在發(fā)送請(qǐng)求時(shí)不會(huì)自動(dòng)攜帶cookie,所以我們需要加上此屬性 */ }); const apolloClient = new ApolloClient({ link: httpLink, cache: new InMemoryCache(), connectToDevTools: true, }); export default new VueApollo({ defaultClient: apolloClient, clients: { default: apolloClient }, });
3,接著我們將配置好的js文件引入到man.js中,具體如下:
import Vue from 'vue'; import ElementUI from 'element-ui'; import VueApollo from 'vue-apollo'; import apolloProvider from './apollo'; // Install the vue plugin // Vue.component('full-calendar', fullCalendar); Vue.config.productionTip = false; Vue.use(ElementUI); Vue.use(VueApollo); /* eslint-disable no-new */ new Vue({ el: '#app', provide: apolloProvider.provide(), //這句代碼是我們要和vuex一樣,將apolloProvider添加為根組件 router, store, template: '<App/>', components: { App }, });
準(zhǔn)備好這些,我們就可以開始使用了,另外如果有谷歌賬號(hào),可以在谷歌的應(yīng)用商店去下載“Apollo Client Developer Tools”插件,來(lái)模擬vue-apollo調(diào)用接口,當(dāng)然你也可以直接看后端的代碼,然后看接口的定義
4,然后在項(xiàng)目的根目錄下創(chuàng)建一個(gè)graphql文件夾,這個(gè)文件里面去封裝每一個(gè)模塊所對(duì)應(yīng)的方法,為了代碼的簡(jiǎn)潔,可以每一個(gè)模塊建立一個(gè)js文件,實(shí)現(xiàn)接口方法的統(tǒng)一管理,比如說(shuō)我創(chuàng)建了一個(gè)交atemplate.graphql文件,注意這個(gè)文件夾下所有的文件后綴名都是.graphql。
首先我們說(shuō)一下query方式的調(diào)用:具體代碼如下:
query getAssessTemplateListings($query: String, $state: Int, $page: Int, $pageSize: Int) { assessTemplateListings(query: $query, state: $state, page: $page, pageSize: $pageSize) { assessTemplates { id groupId name description state createdAt updatedAt } page pageSize total } }
5,然后將該方法引入到所需要調(diào)用的vue文件中引入方式如下:
復(fù)制代碼 代碼如下:
import { getAssessTemplateListings, stopAssessTemplate } from '@/services/graphql/assessTemplate.graphql';
然后在vue的methods中定義一個(gè)方法,最后調(diào)用
lodAtemplate() { this.$apollo.query({ query: getAssessTemplateListings, variables: { state: 1, page: this.currentPage, pageSize: this.pageSize, }, fetchPolicy: 'network-only', /* 如果一個(gè)獲取數(shù)據(jù)的列表,在參數(shù)沒(méi)有變化的時(shí)候,那我們希望用后臺(tái)數(shù)據(jù)的緩存,則需要在請(qǐng)求下方加上 fetchPolicy: 'network-only'來(lái)做緩存 */ }).then(({ data }) => { const assessTempalteListings = data.assessTemplateListings; consloe.log(assessTempalteListings); }); }
根據(jù)我們的需求因?yàn)槭谦@取列表的,所以在created方法里面去調(diào)用這個(gè)方法即
created () { this.lodAtemplate(); }
然后再看一下mutation的用法,封裝如下:
mutation stopAssessTemplate($input: StopAssessTemplateInput!) { stopAssessTemplate(input: $input) { clientMutationId } }
在vue中的使用
stop () { this.$apollo.mutate({ mutation: stopAssessTemplate, variables: { input: { clientMutationId: uuidv1(), id: obj.id, }, }, }).then(() => { }).catch((error) => { this.$message.error(Util.Comm.graphqlError(error.message)); }); }
用法我們就說(shuō)完了,接下來(lái)總結(jié)一下
1、因?yàn)榍岸瞬捎胿ue-apollo客戶端發(fā)送fetch方式的graphql的請(qǐng)求,而fetch請(qǐng)求也有的缺點(diǎn):fetch只對(duì)網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò),對(duì)400,500都當(dāng)做成功的請(qǐng)求,需要封裝去處理,所以說(shuō)對(duì)于vue-axios的try,catch是獲取不到錯(cuò)誤的,Apollo請(qǐng)求超時(shí)的問(wèn)題無(wú)法解決,httpLink沒(méi)有提供timeout的接口,導(dǎo)致無(wú)法中斷或重連當(dāng)前請(qǐng)求
2、通過(guò)Apollo查詢返回的數(shù)據(jù)是freeze狀態(tài),無(wú)法修改,可以通過(guò)對(duì)象淺拷貝或者序列化的方式解凍。這個(gè)坑我自己趟過(guò)。
因?yàn)槲乙鲆粋€(gè)對(duì)于某一個(gè)模板增加適用模板區(qū)域的功能,那么要求是先調(diào)用模板詳情接口,如果有區(qū)域就顯示出來(lái),對(duì)已有的區(qū)域可以做增刪改的功能,獲取到數(shù)據(jù)后存在vuex中,當(dāng)我添加完成后更改vuex的數(shù)據(jù)報(bào)錯(cuò),意思是不允許更改,解決辦法就是在初始化vuex的數(shù)據(jù)時(shí)先深拷貝一份數(shù)據(jù)存入到vuex中,而不是直接存入,另外建議可以使用lodash.js,因?yàn)檫@個(gè)js庫(kù)集成了很多方法,不用寫那么多繁瑣的代碼
3、再說(shuō)一下query和mutaionl兩種方式解釋,按照官方的意思是
query:僅獲取數(shù)據(jù)(fetch)的只讀請(qǐng)求
mutaion:獲取數(shù)據(jù)后還有寫操作的請(qǐng)求
關(guān)于vue-apollo怎么在vue-cli中使用問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。