vuejs / vue-async-data Goto Github PK

View Code? Open in Web Editor NEW

417.0 35.0 38.0 111 KB

Async data loading plugin

License: MIT License

JavaScript 99.89% HTML 0.11%

vue-async-data's Introduction

THIS REPOSITORY IS DEPRECATED

vue-async-data

Async data loading plugin for Vue.js

NOTE:

Does not work with Vue 2.0.
You don't need this if you are using vue-router. Use vue-router's route.data hook instead.

Install

npm install vue-async-data

Usage

// assuming CommonJS
var Vue = require('vue')
var VueAsyncData = require('vue-async-data')

// use globally
// you can also just use `VueAsyncData.mixin` where needed
Vue.use(VueAsyncData)

Then, in your component options, provide an asyncData function:

Vue.component('example', {
  data: function {
    return {
      msg: 'not loaded yet...'
    }
  },
  asyncData: function (resolve, reject) {
    // load data and call resolve(data)
    // or call reject(reason) if something goes wrong
    setTimeout(function () {
      // this will call `vm.$set('msg', 'hi')` for you
      resolve({
        msg: 'hi'
      })
    }, 1000)
  }
})

Promise

You can also return a promise that resolves to the data to be set (plays well with vue-resource):

Vue.component('example', {
  // ...
  asyncData: function () {
    var self = this
    return someServiceThatReturnsPromise.get(12345)
      .then(function (msg) {
        // returning this as the Promise's resolve value
        // will call `vm.$set('msg', msg)` for you
        return {
          msg: msg
        }
        // or, set it yourself:
        // self.msg = msg
      })
  }
})

Parallel fetching with Promise.all and ES6:

Vue.component('example', {
  // ...
  asyncData() {
    return Promise.all([
      serviceA.get(123),
      serviceB.get(234)
    ]).then(([a, b]) => ({a, b}))
  }
})

Reloading Data

The component also gets a method named reloadAsyncData, which obviously reloads the data:

Vue.component('example', {
  // ...
  asyncData() {
    // load data based on `this.params`
  },
  // reload when params change
  watch: {
    params: 'reloadAsyncData'
  }
})

Loading State

Your component automatically gets a $loadingAsyncData meta property, which allows you to display a loading state before the data is loaded:

<div v-if="$loadingAsyncData">Loading...</div>
<div v-if="!$loadingAsyncData">Loaded. Put your real content here.</div>

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:

<example wait-for="async-data"></example>

License

MIT

vue-async-data's People

Contributors

Stargazers

Watchers

vue-async-data's Issues

NPM not offering 1.0.0-alpha compat

For some reason I'm having to checkout master in npm to get this to work with vue 1.x

add tags for each released version

hi, recently we want to add your lib on https://cdnjs.com, we use npm auto-update or git auto-update(depending on git tags) to add every released version, so could you please consider adding tags for every released version?

thank you very much!

cdnjs/cdnjs#6993

Fails with Vue.js v1.0.0-alpha.1 : "this._defineMeta is not a function"

Uncaught TypeError: this._defineMeta is not a function

It looks like because of deprecation of this._defineMeta in favor of _.defineReactive
but I could not find where defineReactive is exposed to use it in mixin

Do you have plan to make this vue-async-data work with vuejs2.0?

Hi,
Do you have plan to make this vue-async-data work with vuejs2.0?
Thanks~!

Using VueAsyncData.mixin throws "[vue-async-data] not installed!" warning.

In vue 1.0.21 there is still mechanism, that throws "[vue-async-data] not installed!" warning
while using vue-async-data as mixin.

<script>
import VueAsyncData from 'vue-async-data';

export default {
  mixins: [
    VueAsyncData.mixin,
  ],
...
  asyncData(resolve, reject) {
    CustomDataService.getItems().then(...

but it works properly!

Bower Support

Please can this package be added to bower. The other official plugins have been added, so it would make sense if this was added as well.

Thanks.

Throws '[vue-async-data] not installed!' warning when attached as mixin

Because of install method is not called in mixin (called only in use for plugins)

But according to docs

// use globally
// you can also just use `VueAsyncData.mixin` where needed
Vue.use(VueAsyncData)

it can be assigned separately to components via mixins: [VueAsyncData.mixin],

Why not integrate this plugin's function into Vue core?

Maybe loading data asynchronously is more a common case. I think Vue's core should implement this function, instead of making a plugin.

e.g. We can pass data a function which returns a Promise.

wait-for directive on child elements does not hide contents when operating in vue-router route component

Currently attempting to use vue-async-data and the wait-for directive but it does not hide elements that are inside of a vue-router route component.

<!-- app.html -->
<body>
<router-view></router-view>
<script src="app.js" />
</body>

<!-- component.html -->
<div wait-for="async-data">
This is a child element, should this be visible?
</div>
<div v-if="!$loadingAsyncData">
This is hidden correctly.
</div>

// app.js - snippet
// component and router
var component = Vue.extend({
  template: require("component.html!text"),
  asyncData: function(resolve, reject) {
    setTimeout(function() {
      resolve();
    }, 2000);
  }
});

router.map({
  "/": { component: component }
});

router.start(app, "body");

Edit: after reviewing the code, is it intended for the wait-for directive to only be used inside of a component tag? In that case, it would be impossible to use it in the context of vue-router, as vue-router is responsible for explicitly adding route components to the DOM.

what's the point as there's already waitForData with vue-router

Add compatibility for VueJs 2.x

Hello,

Is it possible to add the compatibility of this module for Vue 2.x ?

Events not fired from broadcasting

When I try to broadcast event from asyncData I receive no event to child component.

// Parent with async data plugin
asyncData: function () {
    var self = this;
    return this.$http.get('foo.json')
        .then(function (response) {
            self.$broadcast('dataRetrieved', response.data);
            self.data = response.data;
        })
 }

But when I was using broadcast without asyncData I get events to child component

  // Parent without plugin
  methods: {
    getData: function () {

        this.$http.get('foo.json').success(function (data) {
            this.$broadcast('dataRetrieved', data);
            this.data = data;
        }).error(function (err) {
            console.log(err);
        });
    },
 }

Here is my child component, listening for events.

// Child
events: {
    dataRetrieved: function (data) {
       // Here should I get data, but this event is not fired.
        this.data = data;
    }
}

One way binds

Would be awesome if this could 'refresh' one way binds when async data is received

Something like <span> Edit {{* person.name }} </span>

   asyncData: function () {
            var self = this
            return PeopleRedux
                    .single(self.$route.params.personId)
                    .then(function (person) {
                        return {
                            person: person
                        }
                    });
        },

Support for RxJS

Hello @yyx990803. I think will be better if this plugin will have a support for RxJS

Usage with Vue 2 & vue-router 2

Hi,

looking at this example for data fetching with vue-router v2+ I understand that the async data option has been removed and a pattern for async data very similar to this project is in use.

I'm refactoring a vue 1.x project with migration to v2 in mind, so I was wondering if my assumption is true and whether it'd be an option to adapt this plugin to work with 2.x

If so I'd might also be able to take care of the task and make a PR