https://github.com/jwhittle933/vue-external-api
External Resource Management Plugin for Vue
https://github.com/jwhittle933/vue-external-api
Last synced: about 2 months ago
JSON representation
External Resource Management Plugin for Vue
- Host: GitHub
- URL: https://github.com/jwhittle933/vue-external-api
- Owner: jwhittle933
- Created: 2020-09-02T15:22:33.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-03T12:44:36.000Z (over 4 years ago)
- Last Synced: 2025-02-02T18:33:07.542Z (4 months ago)
- Language: JavaScript
- Size: 2.93 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ExAPI (vue-external-api)
ExAPI is a Vue plugin for managing external resources conveniently. The intent is to expose your request layer to the Vue instance, with the potential to connect it to Vuex and VueRouter logic.
## Example
```js
// main.js
import ExAPI from 'vue-external-api'
import router from './path/to/router.js'
import store from './path/to/store.js'
import requestLayer from './path/to/requestLayer.js'
const exAPI = new ExAPI({ router, store, requestLayer })
Vue.use(exAPI)
// someComponent.js
export default {
data() {
return {
pageNumber: 1,
}
},
created() {
this.$resources.blog.list(this.pageNumber)
// => [BlogPost, BlogPost, ...]
this.$resources.blog.featured()
// => [BlogPost, BlogPost, BlogPost]
}
}
```
## Arguments
The ExAPI class accepts an objeect with three keys: router, store, and requestLayer. Each of these will be enumerated below.
### Request Layer
The request layer that ExAPI accepts is an object that contains all the fetching logic required for your app. The layer itself can contain any logic you need, i.e., axios requests, S3 bucket fetches, etc. The request layer object must look like this:
```js
{
init: (Store, resourceName) => {
// initialization logic here
// init will be called once for every resource under handlers,
// and the resourceName will be the key,
// i.e., "blog"
},
routing: {
// http response codes with routing logic
// if this type of routing isn't necessary, you can exclude this field
// as well as the Router from ExAPI.
200: Router => {},
401: Router => {},
404: Router => {},
},
handlers: {
// each key under handlers is a scoped block of requests.
blog: {
featured: Store => {},
list: (Store, pageNumber) => {}
},
comments: {
listByBlogId: (Store, id) => {}
}
}
}
```
### Router
ExAPI accepts a Vue Router instance, and will pass it to your navi