Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/grinat/vue-fast-rest
https://github.com/grinat/vue-fast-rest
vue
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/grinat/vue-fast-rest
- Owner: grinat
- License: mit
- Created: 2019-06-15T19:40:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-05T12:48:28.000Z (almost 4 years ago)
- Last Synced: 2024-10-29T22:52:01.260Z (about 2 months ago)
- Topics: vue
- Language: JavaScript
- Size: 479 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-fast-rest
[](https://travis-ci.org/grinat/vue-fast-rest)
[Docs](https://vue-fast-rest.netlify.com/)
## Examples
[List](https://grinat.github.io/vue-fast-rest/examples/list.html)
## Install
Install from npm
```
npm i vue-fast-rest --save
```
Connect to vue
```js
// import store from './store' // <-- get your Vuex instance
import {plugin} from 'vue-fast-rest'
Vue.use(plugin, { store }) // <-- connect plugin
```
Or if you use without npm from cdn and etc
```js
// create store
Vue.use(Vuex)
const store = new Vuex.Store()
// connect plugin
Vue.use(VueFastRest.plugin, {store})
```
## Usage
```vue
{{items}}
creating: {{loading.create}}
reading: {{loading.read}}
updating: {{loading.update}}
deleting: {{loading.delete}}
import {REST} from 'vue-fast-rest'
export default {
computed: {
// read store data
items () {
return this.$store.getters[REST.getters.readUrlEndpoint](this.getEndpoint())
},
// get loading state for current endpoint
loading () {
return this.$store.getters[REST.getters.readEndpointState](this.getEndpoint())
}
},
mounted() {
// fetch data
this.$store.dispatch(REST.actions.updateUrlEndpoint, {
endpoint: this.getEndpoint()
})
},
methods: {
getEndpoint() {
return 'https://site.com/authors'
},
createItem () {
this.$store.dispatch(REST.actions.createModel, {
endpoint: this.getEndpoint(),
url: 'https://site.com/author/create',
data: {
title: 'Foo',
author: 'Bar'
}
})
},
removeItem (item) {
this.$store.dispatch(REST.actions.deleteModel, {
endpoint: this.getEndpoint(),
url: 'https://site.com/author/delete/' + item.id,
ids: [item.id]
})
},
updateItem (item) {
this.$store.dispatch(REST.actions.updateModel, {
endpoint: this.getEndpoint(),
url: 'https://site.com/author/update/' + item.id,
id: item.id,
data: {
title: 'Update'
}
})
}
}
}
```
## Requirements
Rest API with arrays of data should always be returned in the format:
```json
{
"data": [
{"id": 1, "price": 1},
{"id": 2, "title": "foo"}
],
// optional data, need for pagination
"_meta": {
"totalCount": 2,
"currentPage": 1,
"pageCount": 1,
"perPage": 20
}
}
```
For one item:
```json
{"id": 1, "price": 1}
```
If you have other format, you can use adapters for convert data:
```js
this.$store.dispatch(REST.actions.updateUrlEndpoint, {
endpoint: this.getEndpoint(),
params: {
transformResponse: [function (data) {
// Do whatever you want to transform the data
return data
}]
}
})
```