Skip to content

Commit 6b13ac1

Browse files
committed
updated readme, added coveralls token
1 parent 5d32935 commit 6b13ac1

File tree

2 files changed

+70
-90
lines changed

2 files changed

+70
-90
lines changed

.coveralls.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
repo_token: DQiQCSLbENvvOLn0NXP8nu8KBKXnPdRqk
1+
repo_token: aLBtUekCwWhjMtzSHC9bcIU7neYTA7Q1x

README.md

Lines changed: 69 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,119 @@
11
# vue-request
22

3-
[![Build](https://travis-ci.org/nickforddesign/vue-req.svg?branch=master)](#)
4-
[![Coverage Status](https://coveralls.io/repos/github/nickforddesign/vue-req/badge.svg?branch=master)](https://coveralls.io/github/nickforddesign/vue-req?branch=master)
3+
[![Build](https://travis-ci.org/nickforddesign/vue-models.svg?branch=master)](#)
4+
[![Coverage Status](https://coveralls.io/repos/github/nickforddesign/vue-models/badge.svg?branch=master)](https://coveralls.io/github/nickforddesign/vue-models?branch=master)
55
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
66

7-
> A modern fetch plugin for Vue.js with easy config config and hooks
7+
> A better models plugins for Vue.js
88
99
## Installation
1010

1111
``` bash
12-
npm install vue-req
12+
npm install vue-models
1313
```
1414

1515
## Setup
1616

1717
```js
1818
import Vue from 'vue'
19-
import VueRequest from 'vue-req'
19+
import VueModels from 'vue-models'
2020

21-
Vue.use(VueRequest, options)
21+
Vue.use(VueModels)
2222
```
2323

24-
## Options
24+
## Models
2525

26-
### headers [Object]
27-
Headers can contain any custom headers you'd like to include in your requests. The values can be properties or methods (ie. their values can either be functions, literals, or references). Use functions for values that may change over time, such as Vuex getters.
26+
The Model class returns a Vue instance with some default helper methods and computed properties. The following is an example of extending the Model class:
2827

2928
```js
30-
import store from './store'
29+
import Model from '@/modules/model'
3130

32-
const Identity = {
33-
$oid: '4234c0a877ccf94401baz'
31+
const defaults = {
32+
name: 'user',
33+
computed: {
34+
full_name() {
35+
return `${this.first_name} ${this.last_name}`
36+
}
37+
}
3438
}
3539

36-
const options = {
37-
headers: {
38-
Authorization() {
39-
return store.getters.auth_token
40-
},
41-
Refresh: 'example_refresh_token',
42-
Identity
40+
export default class User extends Model {
41+
static schema() {
42+
return {
43+
id: String,
44+
first_name: String,
45+
last_name: String
46+
}
47+
}
48+
constructor(attributes, options) {
49+
super(attributes, [defaults, options])
4350
}
4451
}
4552

46-
Vue.use(VueRequest, options)
4753
```
4854

49-
### before [Function]
50-
Before hook to fire before each request. The hook uses async/await, so asynchronous hooks will complete before the actual request is made. This is particularly useful for checking if you have expired tokens and refreshing them before a request.
51-
52-
Here's an example of a before hook checking for expired tokens and attempting to refresh before the original request:
53-
5455
```js
55-
import moment from 'moment'
56-
import store from './store'
56+
import UserModel from '@/models/user'
57+
const user = new UserModel({
58+
first_name: 'Hidetoshi',
59+
last_name: 'Hasagawa'
60+
})
5761

58-
const token = {
59-
id: '1234567890',
60-
expires: '2017-09-30T01:44:19.273Z'
61-
}
62-
const options = {
63-
async before() {
64-
if (moment.utc(token.expires) >= moment.utc()) {
65-
store.dispatch('refresh_tokens')
66-
}
67-
}
68-
}
62+
console.log(user.full_name) // returns 'Hidetoshi Hasagawa'
6963

70-
Vue.use(VueRequest, options)
7164
```
7265

73-
### timeout [Function]
74-
Timeout hook to fire in the event of a timeout.
66+
The Model class has some default methods and computed attributes that are useful for basic CRUD operations:
7567

76-
```js
77-
const options = {
78-
timeout() {
79-
alert('The request timed out.')
80-
}
81-
}
68+
### Model.basePath
8269

83-
Vue.use(VueRequest, options)
84-
```
70+
An overwriteable attribute that either uses the name of the model, or the urlRoot property from the options parameter.
8571

86-
### timeout_duration [Number]
87-
Duration in ms for fetch timeout limit.
72+
### Model.url
8873

89-
```js
90-
const options = {
91-
timeout_duration: 25000
92-
}
74+
An overwriteable attribute that is used for XHR requests. This will override the construction of the urls used for all CRUD operations.
9375

94-
Vue.use(VueRequest, options)
95-
```
76+
### Model.isNew
9677

97-
## Usage
78+
Based on whether or not the model has an id. Affects whether or not Model.save is a POST or PUT.
79+
80+
### Model.fetch()
81+
82+
Fetches the model via a GET at Model.url
83+
84+
### Model.save(data, options)
85+
86+
Data must be valid json, options may contain a `path` property in order to deviate from the standard urlRoot.
87+
88+
### Model.destroy()
89+
90+
Sends a DELETE request for the model.
91+
92+
### Model.reset()
93+
94+
Uses the schema definition to reset all values to their default values.
95+
96+
### Model.toJSON()
97+
98+
Returns all approved data attributes, in addition to all computed properties as json.
99+
100+
101+
Models can be bound to a Vue component using the following syntax:
98102

99103
```js
100-
import Vue from 'vue'
101104
export default {
102-
mounted() {
103-
this.fetch()
104-
},
105-
methods: {
106-
async fetch() {
107-
const response = await this.$request('/data')
108-
this.$store.dispatch('set_data', response)
109-
},
110-
save() {
111-
const response = await this.$request('/data', {
112-
method: 'put',
113-
body: {
114-
foo: 'bar'
115-
}
116-
})
117-
this.$store.dispatch('saved_data', response)
105+
models: {
106+
user() {
107+
return new UserModel(data)
118108
}
109+
},
110+
created() {
111+
console.log(this.$user.full_name);
119112
}
120113
}
121114
```
122115

123-
## Requests
124-
The request function accepts the following parameters:
125-
126-
### url [String]
127-
The base url to make relative requests from. If an absolute url is passed to the request function, this will be overriden.
128-
129-
### options [Object]
130-
The options parameter accepts the following parameters:
131-
#### method [String]
132-
The method of the request (get (default), put, post, delete, options)
133-
#### body [Object|String]
134-
The body of the request
135-
### headers [Headers]
136-
Custom headers to add to the request
116+
NOTE: By default, models are reset when the parent component is destroyed. To disable this, the `persist: true` option can be provided in the model options.
137117

138118

139119
## Build Setup

0 commit comments

Comments
 (0)