https://github.com/zadigo/vue-requests-store
A store which purpose is to keep all the APIs for an app in one place
https://github.com/zadigo/vue-requests-store
vue vue-plugin vue-plugins vuejs3
Last synced: 3 months ago
JSON representation
A store which purpose is to keep all the APIs for an app in one place
- Host: GitHub
- URL: https://github.com/zadigo/vue-requests-store
- Owner: Zadigo
- License: mit
- Created: 2022-02-26T11:48:19.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-26T12:23:07.000Z (over 4 years ago)
- Last Synced: 2025-05-07T12:12:28.782Z (about 1 year ago)
- Topics: vue, vue-plugin, vue-plugins, vuejs3
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Requests Store
A Vue project can contain many different APIs from different files in your project. To resolve this issue, the Vue Requests Store centralize your APIs in one place which make them much easier to call in your templates.
## How to install
Installing VueRequestStore is very easy. You need to create a plugin file in your plugins folder in src and do the following:
```javascript
import { createApiStore } from './vue-api'
import myAxios from './my-axios'
var api = createApiStore(null, {
// Rest of code goes there
})
```
`createApiStore` takes two parameters: `client`, `options`. The client is the custom one that you intend to use in your project e.g. axios and the options are a list of requests to be stored in the store. Once you defined your client as so somewhere in your app:
```javascript
import axios from 'axios'
const client = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com/',
timeout: 60 * 1000,
headers: { 'Content-Type': 'application/json' },
withCredentials: false
})
window.axios = client
export default client
```
The previous code becomes:
```javascript
import { createApiStore } from './vue-api'
import client from './my-custom-client'
var api = createApiStore(client, {
// Rest of code goes there
})
```
## Registering your requests
The `options` parameter of `createApiStore` requires on root element `requests` which is an array of dicts which themselves require two main keys: `name` and `action`.
```javascript
var api = createApiStore(client, {
requests: [
{
name: 'todos',
action: (client, params) => {
method: 'get',
url: '/todos'
}
}
]
})
```
The action function takes two parameters: `client` and `params`. The client is the one you initially passed in `createApiStore` that will be used to make the calls. `params` are simply additional parameters passed from your template in order to complete the url for the call.
## Examples
### Sending a request without parameters
```html
export default {
name: 'SomeComponent'
methods: {
testApi () {
this.$api('todos')
.then((response) => {
// Rest of code
})
.catch((error) => {
// Rest of code
})
}
}
}
```
### Sending a request with parameters
```html
export default {
name: 'SomeComponent'
methods: {
testApi () {
this.$api('todos', { id: 1 })
.then((response) => {
// Rest of code
})
.catch((error) => {
// Rest of code
})
}
}
}
```
```javascript
var api = createApiStore(client, {
requests: [
{
name: 'todos',
action: (client, params) => {
method: 'get',
url: '/todos/${params.id}'
}
}
]
})
```
```javascript
var api = createApiStore(client, {
requests: [
{
name: 'todos',
action: (client, params) => {
method: 'get',
url: '/posts/1/comments',
params: params
}
}
]
})
```