',
11 |
12 | props: ['msgId'],
13 |
14 | // reload data on msgId change
15 | watch: {
16 | msgId: 'reloadAsyncData'
17 | },
18 |
19 | data: function () {
20 | return {
21 | msg: {}
22 | }
23 | },
24 |
25 | asyncData: function (resolve, reject) {
26 | var id = this.msgId
27 | // resolve data asynchronously
28 | setTimeout(function () {
29 | resolve({
30 | msg: {
31 | id: id,
32 | text: 'hihihi'
33 | }
34 | })
35 | }, 1000)
36 | // OR: return a promise (see readme)
37 | }
38 | })
39 |
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)
48 | }
49 | }
50 | })
51 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015-2016 Evan You
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/vue-async-data.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var vue // lazy bind
3 |
4 | var asyncData = {
5 | created: function () {
6 | if (!vue) {
7 | console.warn('[vue-async-data] not installed!')
8 | return
9 | }
10 | if (this.$options.asyncData) {
11 | if (this._defineMeta) {
12 | // 0.12 compat
13 | this._defineMeta('$loadingAsyncData', true)
14 | } else {
15 | // ^1.0.0-alpha
16 | vue.util.defineReactive(this, '$loadingAsyncData', true)
17 | }
18 | }
19 | },
20 | compiled: function () {
21 | this.reloadAsyncData()
22 | },
23 | methods: {
24 | reloadAsyncData: function () {
25 | var load = this.$options.asyncData
26 | if (load) {
27 | var self = this
28 | var resolve = function (data) {
29 | if (data) {
30 | for (var key in data) {
31 | self.$set(key, data[key])
32 | }
33 | }
34 | self.$loadingAsyncData = false
35 | self.$emit('async-data')
36 | }
37 | var reject = function (reason) {
38 | var msg = '[vue] async data load failed'
39 | if (reason instanceof Error) {
40 | console.warn(msg)
41 | throw reason
42 | } else {
43 | console.warn(msg + ': ' + reason)
44 | }
45 | }
46 | this.$loadingAsyncData = true
47 | var res = load.call(this, resolve, reject)
48 | if (res && typeof res.then === 'function') {
49 | res.then(resolve, reject)
50 | }
51 | }
52 | }
53 | }
54 | }
55 |
56 | var api = {
57 | mixin: asyncData,
58 | install: function (Vue, options) {
59 | vue = Vue
60 | Vue.options = Vue.util.mergeOptions(Vue.options, asyncData)
61 | }
62 | }
63 |
64 | if(typeof exports === 'object' && typeof module === 'object') {
65 | module.exports = api
66 | } else if(typeof define === 'function' && define.amd) {
67 | define(function () { return api })
68 | } else if (typeof window !== 'undefined') {
69 | window.VueAsyncData = api
70 | }
71 | })()
72 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # THIS REPOSITORY IS DEPRECATED
2 |
3 | ## vue-async-data
4 |
5 | > Async data loading plugin for Vue.js
6 |
7 | **NOTE:**
8 |
9 | - Does not work with Vue 2.0.
10 |
11 | - You don't need this if you are using [vue-router](https://github.com/vuejs/vue-router). Use vue-router's [`route.data` hook](http://router.vuejs.org/en/pipeline/data.html) instead.
12 |
13 | ### Install
14 |
15 | ``` bash
16 | npm install vue-async-data
17 | ```
18 |
19 | ### Usage
20 |
21 | ``` js
22 | // assuming CommonJS
23 | var Vue = require('vue')
24 | var VueAsyncData = require('vue-async-data')
25 |
26 | // use globally
27 | // you can also just use `VueAsyncData.mixin` where needed
28 | Vue.use(VueAsyncData)
29 | ```
30 |
31 | Then, in your component options, provide an `asyncData` function:
32 |
33 | ``` js
34 | Vue.component('example', {
35 | data: function {
36 | return {
37 | msg: 'not loaded yet...'
38 | }
39 | },
40 | asyncData: function (resolve, reject) {
41 | // load data and call resolve(data)
42 | // or call reject(reason) if something goes wrong
43 | setTimeout(function () {
44 | // this will call `vm.$set('msg', 'hi')` for you
45 | resolve({
46 | msg: 'hi'
47 | })
48 | }, 1000)
49 | }
50 | })
51 | ```
52 |
53 | #### Promise
54 |
55 | 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)):
56 |
57 | ``` js
58 | Vue.component('example', {
59 | // ...
60 | asyncData: function () {
61 | var self = this
62 | return someServiceThatReturnsPromise.get(12345)
63 | .then(function (msg) {
64 | // returning this as the Promise's resolve value
65 | // will call `vm.$set('msg', msg)` for you
66 | return {
67 | msg: msg
68 | }
69 | // or, set it yourself:
70 | // self.msg = msg
71 | })
72 | }
73 | })
74 | ```
75 |
76 | Parallel fetching with `Promise.all` and ES6:
77 |
78 | ``` js
79 | Vue.component('example', {
80 | // ...
81 | asyncData() {
82 | return Promise.all([
83 | serviceA.get(123),
84 | serviceB.get(234)
85 | ]).then(([a, b]) => ({a, b}))
86 | }
87 | })
88 | ```
89 |
90 | #### Reloading Data
91 |
92 | The component also gets a method named `reloadAsyncData`, which obviously reloads the data:
93 |
94 | ``` js
95 | Vue.component('example', {
96 | // ...
97 | asyncData() {
98 | // load data based on `this.params`
99 | },
100 | // reload when params change
101 | watch: {
102 | params: 'reloadAsyncData'
103 | }
104 | })
105 | ```
106 |
107 | #### Loading State
108 |
109 | Your component automatically gets a `$loadingAsyncData` meta property, which allows you to display a loading state before the data is loaded:
110 |
111 | ``` html
112 |
Loading...
113 |
Loaded. Put your real content here.
114 | ```
115 |
116 | Or, if you prefer to wait until data loaded to display the component, you can use `wait-for` to listen for the `async-data` event, which is automatically emitted when the data is loaded:
117 |
118 | ``` html
119 |
120 | ```
121 |
122 | ### License
123 |
124 | [MIT](http://opensource.org/licenses/MIT)
125 |
--------------------------------------------------------------------------------