|
1 | 1 | # vue-request
|
2 | 2 |
|
3 |
| -[](#) |
4 |
| -[](https://coveralls.io/github/nickforddesign/vue-req?branch=master) |
| 3 | +[](#) |
| 4 | +[](https://coveralls.io/github/nickforddesign/vue-models?branch=master) |
5 | 5 | [](https://opensource.org/licenses/MIT)
|
6 | 6 |
|
7 |
| -> A modern fetch plugin for Vue.js with easy config config and hooks |
| 7 | +> A better models plugins for Vue.js |
8 | 8 |
|
9 | 9 | ## Installation
|
10 | 10 |
|
11 | 11 | ``` bash
|
12 |
| -npm install vue-req |
| 12 | +npm install vue-models |
13 | 13 | ```
|
14 | 14 |
|
15 | 15 | ## Setup
|
16 | 16 |
|
17 | 17 | ```js
|
18 | 18 | import Vue from 'vue'
|
19 |
| -import VueRequest from 'vue-req' |
| 19 | +import VueModels from 'vue-models' |
20 | 20 |
|
21 |
| -Vue.use(VueRequest, options) |
| 21 | +Vue.use(VueModels) |
22 | 22 | ```
|
23 | 23 |
|
24 |
| -## Options |
| 24 | +## Models |
25 | 25 |
|
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: |
28 | 27 |
|
29 | 28 | ```js
|
30 |
| -import store from './store' |
| 29 | +import Model from '@/modules/model' |
31 | 30 |
|
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 | + } |
34 | 38 | }
|
35 | 39 |
|
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]) |
43 | 50 | }
|
44 | 51 | }
|
45 | 52 |
|
46 |
| -Vue.use(VueRequest, options) |
47 | 53 | ```
|
48 | 54 |
|
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 |
| - |
54 | 55 | ```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 | +}) |
57 | 61 |
|
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' |
69 | 63 |
|
70 |
| -Vue.use(VueRequest, options) |
71 | 64 | ```
|
72 | 65 |
|
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: |
75 | 67 |
|
76 |
| -```js |
77 |
| -const options = { |
78 |
| - timeout() { |
79 |
| - alert('The request timed out.') |
80 |
| - } |
81 |
| -} |
| 68 | +### Model.basePath |
82 | 69 |
|
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. |
85 | 71 |
|
86 |
| -### timeout_duration [Number] |
87 |
| -Duration in ms for fetch timeout limit. |
| 72 | +### Model.url |
88 | 73 |
|
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. |
93 | 75 |
|
94 |
| -Vue.use(VueRequest, options) |
95 |
| -``` |
| 76 | +### Model.isNew |
96 | 77 |
|
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: |
98 | 102 |
|
99 | 103 | ```js
|
100 |
| -import Vue from 'vue' |
101 | 104 | 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) |
118 | 108 | }
|
| 109 | + }, |
| 110 | + created() { |
| 111 | + console.log(this.$user.full_name); |
119 | 112 | }
|
120 | 113 | }
|
121 | 114 | ```
|
122 | 115 |
|
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. |
137 | 117 |
|
138 | 118 |
|
139 | 119 | ## Build Setup
|
|
0 commit comments