Skip to content
This repository was archived by the owner on Dec 26, 2018. It is now read-only.

Commit c9e2a55

Browse files
yyx990803yyx990803
committed
expose reloadAsyncData
1 parent 6e96d6f commit c9e2a55

File tree

6 files changed

+120
-120
lines changed

6 files changed

+120
-120
lines changed

‎README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ Vue.component('example', {
4242
})
4343
```
4444

45+
#### Promise
46+
4547
You can also return a promise that resolves to the data to be set (plays well with [vue-resource](https://github.com/vuejs/vue-resource)):
4648

4749
``` js
@@ -77,6 +79,25 @@ Vue.component('example', {
7779
})
7880
```
7981

82+
#### Reloading Data
83+
84+
The component also gets a method named `reloadAsyncData`, which obviously reloads the data:
85+
86+
``` js
87+
Vue.component('example', {
88+
// ...
89+
asyncData() {
90+
// load data based on `this.params`
91+
},
92+
// reload when params change
93+
watch: {
94+
params: 'reloadAsyncData'
95+
}
96+
})
97+
```
98+
99+
#### Loading State
100+
80101
Your component automatically gets a `$loadingAsyncData` meta property, which allows you to display a loading state before the data is loaded:
81102

82103
``` html

‎example/example.build.js

Lines changed: 48 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -52,67 +52,48 @@
5252
Vue.component('test', {
5353

5454
template:
55-
'<div v-if="!$loadingAsyncData">loaded message: {{msg.text}}</div>' +
55+
'<div v-if="!$loadingAsyncData">loaded message: {{msg.id}} {{msg.text}}</div>' +
5656
'<div v-if="$loadingAsyncData">loading...</div>',
5757

58+
props: ['msgId'],
59+
60+
// reload data on msgId change
61+
watch: {
62+
msgId: 'reloadAsyncData'
63+
},
64+
5865
data: function () {
5966
return {
6067
msg: {}
6168
}
6269
},
6370

6471
asyncData: function (resolve, reject) {
72+
var id = this.msgId
6573
// resolve data asynchronously
6674
setTimeout(function () {
6775
resolve({
6876
msg: {
77+
id: id,
6978
text: 'hihihi'
7079
}
7180
})
7281
}, 1000)
73-
74-
// OR: return a promise (see examples below)
82+
// OR: return a promise (see readme)
7583
}
7684
})
7785

78-
new Vue({ el: '#el '})
79-
80-
// --- Promise Examples ---
81-
82-
// mock a service
83-
var msgService = {
84-
get: function (id) {
85-
return new Promise(function (resolve, reject) {
86-
setTimeout(function () {
87-
resolve({
88-
text: 'hihihi from ' + id
89-
})
90-
}, 1000)
91-
})
92-
}
93-
}
94-
95-
// in your asyncData function:
96-
function asyncData () {
97-
return msgService.get(1).then(function (msg) {
98-
return {
99-
msg: msg
100-
}
101-
})
102-
}
103-
104-
// parallel data fetching with multiple requests:
105-
function asyncDataParallel () {
106-
return Promise.all([
107-
msgService.get(1),
108-
msgService.get(2)
109-
]).then(function (msgs) {
110-
return {
111-
a: msgs[0],
112-
b: msgs[1]
86+
var app = new Vue({
87+
el: '#el',
88+
data: {
89+
msgId: 123
90+
},
91+
methods: {
92+
reload: function () {
93+
this.msgId = Math.floor(Math.random() * 10000)
11394
}
114-
})
115-
}
95+
}
96+
})
11697

11798

11899
/***/ },
@@ -10147,28 +10128,36 @@
1014710128
}
1014810129
},
1014910130
compiled: function () {
10150-
var load = this.$options.asyncData
10151-
if (load) {
10152-
var self = this
10153-
var resolve = function (data) {
10154-
if (data) {
10155-
for (var key in data) {
10156-
self.$set(key, data[key])
10131+
this.reloadAsyncData()
10132+
},
10133+
methods: {
10134+
reloadAsyncData: function () {
10135+
var load = this.$options.asyncData
10136+
if (load) {
10137+
var self = this
10138+
var resolve = function (data) {
10139+
if (data) {
10140+
for (var key in data) {
10141+
self.$set(key, data[key])
10142+
}
1015710143
}
10144+
self.$loadingAsyncData = false
10145+
self.$emit('async-data')
1015810146
}
10159-
self.$loadingAsyncData = false
10160-
self.$emit('async-data')
10161-
}
10162-
var reject = function (reason) {
10163-
if (reason instanceof Error) {
10164-
throw reason
10165-
} else {
10166-
console.warn('[vue] async data load failed: ' + reason)
10147+
var reject = function (reason) {
10148+
var msg = '[vue] async data load failed'
10149+
if (reason instanceof Error) {
10150+
console.warn(msg)
10151+
throw reason
10152+
} else {
10153+
console.warn(msg + ': ' + reason)
10154+
}
10155+
}
10156+
this.$loadingAsyncData = true
10157+
var res = load.call(this, resolve, reject)
10158+
if (res && typeof res.then === 'function') {
10159+
res.then(resolve, reject)
1016710160
}
10168-
}
10169-
var res = load.call(this, resolve, reject)
10170-
if (res && typeof res.then === 'function') {
10171-
res.then(resolve, reject)
1017210161
}
1017310162
}
1017410163
}

‎example/example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
</head>
77
<body>
88
<div id="el">
9-
<test></test>
9+
<button v-on="click:reload">reload data</button>
10+
<test msg-id="{{msgId}}"></test>
1011
</div>
1112
<script src="example.build.js"></script>
1213
</body>

‎example/example.js

Lines changed: 21 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,64 +6,45 @@ Vue.use(asyncData)
66
Vue.component('test', {
77

88
template:
9-
'<div v-if="!$loadingAsyncData">loaded message: {{msg.text}}</div>' +
9+
'<div v-if="!$loadingAsyncData">loaded message: {{msg.id}} {{msg.text}}</div>' +
1010
'<div v-if="$loadingAsyncData">loading...</div>',
1111

12+
props: ['msgId'],
13+
14+
// reload data on msgId change
15+
watch: {
16+
msgId: 'reloadAsyncData'
17+
},
18+
1219
data: function () {
1320
return {
1421
msg: {}
1522
}
1623
},
1724

1825
asyncData: function (resolve, reject) {
26+
var id = this.msgId
1927
// resolve data asynchronously
2028
setTimeout(function () {
2129
resolve({
2230
msg: {
31+
id: id,
2332
text: 'hihihi'
2433
}
2534
})
2635
}, 1000)
27-
28-
// OR: return a promise (see examples below)
36+
// OR: return a promise (see readme)
2937
}
3038
})
3139

32-
new Vue({ el: '#el '})
33-
34-
// --- Promise Examples ---
35-
36-
// mock a service
37-
var msgService = {
38-
get: function (id) {
39-
return new Promise(function (resolve, reject) {
40-
setTimeout(function () {
41-
resolve({
42-
text: 'hihihi from ' + id
43-
})
44-
}, 1000)
45-
})
46-
}
47-
}
48-
49-
// in your asyncData function:
50-
function asyncData () {
51-
return msgService.get(1).then(function (msg) {
52-
return {
53-
msg: msg
54-
}
55-
})
56-
}
57-
58-
// parallel data fetching with multiple requests:
59-
function asyncDataParallel () {
60-
return Promise.all([
61-
msgService.get(1),
62-
msgService.get(2)
63-
]).then(function (msgs) {
64-
return {
65-
a: msgs[0],
66-
b: msgs[1]
40+
var app = new Vue({
41+
el: '#el',
42+
data: {
43+
msgId: 123
44+
},
45+
methods: {
46+
reload: function () {
47+
this.msgId = Math.floor(Math.random() * 10000)
6748
}
68-
})
69-
}
49+
}
50+
})

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-async-data",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "async data loading plugin for Vue.js",
55
"main": "vue-async-data.js",
66
"repository": {

‎vue-async-data.js

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,36 @@ var asyncData = {
55
}
66
},
77
compiled: function () {
8-
var load = this.$options.asyncData
9-
if (load) {
10-
var self = this
11-
var resolve = function (data) {
12-
if (data) {
13-
for (var key in data) {
14-
self.$set(key, data[key])
8+
this.reloadAsyncData()
9+
},
10+
methods: {
11+
reloadAsyncData: function () {
12+
var load = this.$options.asyncData
13+
if (load) {
14+
var self = this
15+
var resolve = function (data) {
16+
if (data) {
17+
for (var key in data) {
18+
self.$set(key, data[key])
19+
}
1520
}
21+
self.$loadingAsyncData = false
22+
self.$emit('async-data')
1623
}
17-
self.$loadingAsyncData = false
18-
self.$emit('async-data')
19-
}
20-
var reject = function (reason) {
21-
if (reason instanceof Error) {
22-
throw reason
23-
} else {
24-
console.warn('[vue] async data load failed: ' + reason)
24+
var reject = function (reason) {
25+
var msg = '[vue] async data load failed'
26+
if (reason instanceof Error) {
27+
console.warn(msg)
28+
throw reason
29+
} else {
30+
console.warn(msg + ': ' + reason)
31+
}
32+
}
33+
this.$loadingAsyncData = true
34+
var res = load.call(this, resolve, reject)
35+
if (res && typeof res.then === 'function') {
36+
res.then(resolve, reject)
2537
}
26-
}
27-
var res = load.call(this, resolve, reject)
28-
if (res && typeof res.then === 'function') {
29-
res.then(resolve, reject)
3038
}
3139
}
3240
}

0 commit comments

Comments
 (0)