0.3.0 • Published 1 month ago
@ace-fetch/vue v0.3.0
@ace-fetch/vue
vue adapter and typing for
@ace-fetch/core
在Vue 3.x
orVue 2.16.x + @vue/composition-api
中使用,
同时支持在Vue实例外调用,以及手动控制当前激活的fetch对象
安装
yarn add @ace-fetch/vue
或者
npm i -S @ace-fetch/vue
使用方法
Vue2
import Vue from 'vue'
import { createFetch, defineRegistApi, setActiveFetch, FetchVuePlugin } from '@vue-async/fetch';
// Vue2 中必须引用插件
Vue.use(FetchVuePlugin);
const afetch = createFetch(axiosInstance)
// 注册 registApi 插件
afetch.use(plugin)
// 定义 regsitApi
const useUserApi = defineRegistApi('user',{
apis:{
getUsers: typedUrl<User[]>`get /users`
}
})
// 注册 afetch 到 Vue
new Vue({
...
afetch,
}).$mount('#app')
// 组件内使用
{
created(){
this.$afetch.client // axiosInstance from createFetch
setActiveFetch(afetch) // 手动设置当前 active fetch 对象
// 使用当前 active fetch 对象
const userApi = useUserApi();
// 或使用其它的 fetch 对象注册regist api
const userApi = useUserApi(afetch);
// 调用方法
userApi.getUsers()
}
}
// 或者
{
inject:{
'afetch':{from: fetchSymbol}
},
created(){
this.afetch
}
}
// 在 @vue/composition-api 中使用 registApi
import { defineComponent } from '@vue/composition-api'
defineComponent({
setup(){
const userApi = useUserApi();
userApi.getUsers()
}
})
Vue3
import { createApp, defineComponent } from 'vue'
import { createFetch, defineRegistApi } from '@vue-async/fetch';
const afetch = createFetch(axiosInstance)
const app = createApp({
...
})
// 注册 afetch
app.use(afetch)
// 注册 registApi 插件
afetch.use(plugin)
// 定义 regsitApi
const useUserApi = defineRegistApi('user',{
apis:{
getUsers: typedUrl<User[]>`get /users`
},
prefix: '/'
})
// 组件内使用
defineComponent({
setup(){
const userApi = useUserApi();
userApi.getUsers()
}
})