Async data loading plugin for Vue.js
- this plugin is written in ES2015, so recommend compile with babel/babel-polyfill.
npm install vue-async-data-2// use as global plugin import Vue from 'vue'; import { AsyncDataPlugin } from 'vue-async-data-2'; Vue.use(AsyncDataPlugin);// use as locally mixin import { AsyncDataMixin } from 'vue-async-data-2'; export default { mixins: [ AsyncDataMixin ], }<template> <div> <p v-if="userNameLoading">Loading...</p> <p v-else-if="userNameError">Error: {{ userNameError }}</p> <p v-else>Hello {{ userName }} !</p> <button v-on:click="asyncReload('userName')">Reload userName</button> </div> </template> <script> export default { name: 'show-data', asyncData: { userName () { return new Promise((resolve, reject) => { setTimeout(_ => { if (Math.random() > 0.5) { resolve('risa'); } else { reject('fetch error...'); } }, 1000); }) }, }, } </script>specify a function that returns Promise. you can also specify a default value.
asyncData: { userName () { // return promise return new Promise((resolve) => { resolve('risa'); }) }, userNameDefault: 'unknown', // default value userNameLazy: false, // skip run at mount? },refresh data.
if name arg is specified, only that field is updated.
this.asyncReload('userName') this.asyncReload()global reload flag.
global error flag.
if resolve, set response.
if throw reject, set error message.
set to true until there response.