Apicase Vue
Helper functions for better experience with Apicase and Vue.js and Nuxt!
Installation
yarn add @apicase/vue
npm install @apicase/vue
Vue.js helpers
injectService - service, config={ name: "api }
Creates mixin that injects service to component instance. Adds request state to config.name and service to service.name properties
import { GetPosts } from "./api"
import { injectService } from "@apicase/vue"
export default {
mixins: [injectService(GetPosts, { name: "posts" })],
async created() {
await this.getPost.doRequest()
console.log(this.posts) // { success, payload, result, ... }
}
}injectFromTree - tree => (service, config={ name: "api })
Like injectService, but accepts tree and gets service by its name from @apicase/services tree
import fetch from '@apicase/adapter-fetch'
import { ApiTree } from '@apicase/services'
import { injectFromTree } from '@apicase/vue'
export const tree = new ApiTree(fetch, [
{ name: 'getPosts', { url: 'posts' }},
{ name: 'helloFoo', { url: 'fooba' }}
])
export const inject = injectFromTree(tree)import { inject } from "./api"
export default {
mixin: [inject("getPosts", { name: "posts" })]
}Nuxt helpers
NOTE: these helpers require Nuxt plugin for Apicase
asyncData - config
Creates asyncData callback that calls service and returns data
<template>
<div v-if="success">
<post :item="item" v-for="item in data" />
</div>
<div v-else>
<h4>Error happened</h4>
<p>{{data}}</p>
</div>
</template>
<script>
import { asyncData } from "@apicase/vue"
export default {
asyncData: asyncData({
service: "getPosts",
payload: ({ route }) => ({
query: { pageId: route.params.pageId }
}),
result: ({ success, result }) => ({
success,
data: success ? result.body : result
})
})
}
</script>payload and result properties are optional. Default values are:
const defaultPayload = ctx => ({})
const defaultResult = ({ success, result }) => ({
success: success,
data: success ? result.body : result
})commitToStore/dispatchToStore - (name, converter)
Helper for events that commits mutation or dipatches action to store that was passed in meta.
Nuxt plugin automatically adds store to meta but you also can do it manually
import fetch from "@apicase/adapter-fetch"
import { ApiTree } from "@apicase/services"
import { ApiService } from "@apicase/core"
import { commitToStore, dispatchToStore } from "@apicase/vue"
import store from "./store"
const WithStore = new ApiService({
meta: { store }
})
export const tree = new ApiTree(WithStore, [
{
url: "posts",
on: {
done: commitToStore("posts/setList", ({ result }) => result.body),
fail: dispatchToStore("alerts/push", ({ result }) => result)
}
}
])2nd callback accepts state and converts it for action/mutation. It's optional, default value:
const defaultConverter = ({ result }) => (result && result.body) || resultLicense
MIT