README
Vuex ORM Plugin: Axios
Installation
import VuexORM from '@vuex-orm/core'
import VuexORMAxios from '@vuex-orm/plugin-axios'
import database from './database'
..
VuexORM.use(VuexORMAxios, {
database,
http: {
baseURL: 'https://jsonplaceholder.typicode.com',
url: '/',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}
})
..
export default () => new Vuex.Store({
namespaced: true,
plugins: [VuexORM.install(database)]
})
Axios Request Config
export const AxiosRequestConfig = {
/**
* Default Base URL
*/
baseURL: 'http://localhost:3000',
/**
* Default URL
*/
url: '/',
/**
* Default Method
*/
method: 'get',
/**
* Access Token Variable
*/
access_token: '',
/**
* Default Headers
*/
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
/**
* Default Data
*/
data: {},
/**
* Default Timout
*/
timeout: 0,
/**
* Default With Credentials Flag
*/
withCredentials: false,
/**
* Default Response Type
*/
responseType: 'json',
/**
* Default Response Encoding
*/
responseEncoding: 'utf8',
/**
* Default Validate Status Method
* @param {number} status
*/
validateStatus(status) {
return status >= 200 && status < 300; // default
},
/**
* Default Max Redirects
*/
maxRedirects: 5,
/**
* Default Socket Path
*/
socketPath: null,
/**
* Default Proxy
*/
proxy: {},
/**
* Default on Response
* @param {object} response
*/
onResponse(response) {
return response.data;
},
/**
* On 401 Unauthorised
* @param {object} error
*/
onUnauthorised(error) {
//
},
/**
* On 404 Not Found
* @param {object} error
*/
onNotFound(error) {
//
},
/**
* On 500 Server Error
* @param {object} error
*/
onServerError(error) {
//
},
/**
* On Generic Error
* @param {object} error
*/
onGenericError(error) {
//
},
/**
* On Laravel Validation Error (Or 422 Error).
* @param {object} error
*/
onValidationError(error) {
//
},
/**
* Default on Error
* @param {object} error
*/
onError(error) {
switch (error.response.status) {
case 401:
this.onUnauthorised(error);
break;
case 404:
this.onNotFound(error);
break;
case 422:
this.onValidationError(error);
break;
case 500:
this.onServerError(error);
break;
default:
this.onGenericError(error);
break;
}
return Promise.reject(error);
},
};
Model Methods
import User from '../models/User';
/**
* @uri `/users`
*/
User.$fetch();
/**
* @uri `/users/:id`
*/
User.$get({
params: {
id: 1
}
});
/**
* @uri `/users`
*/
User.$create({
data: {}
});
/**
* @uri `/users/:id`
*/
User.$update({
params: {
id: 1
},
data: {}
});
/**
* @uri `/users/:id`
*/
User.$delete({
params: {
id: 1
}
});
Model Config
Default Model
import { Model } from '@vuex-orm/core'
export default class Post extends Model {
static entity = 'posts'
static fields () {
return {
id: this.increment(),
title: this.string('')
}
}
}
Edited Model
import { Model } from '@vuex-orm/core'
export default class Post extends Model {
static entity = 'posts'
static fields () {
return {
id: this.increment(),
title: this.string('')
}
}
static methodConf = {
http: {
url: '/post'
},
methods: {
$fetch: {
name: 'fetch',
http: {
url: '',
method: 'get',
},
},
$get: {
name: 'get',
http: {
url: '/:id',
method: 'get',
},
},
$create: {
name: 'create',
http: {
url: '',
method: 'post',
},
},
$update: {
name: 'update',
http: {
url: '/:id',
method: 'put',
},
},
$delete: {
name: 'delete',
http: {
url: '/:id',
method: 'delete',
},
},
},
}
}