%20(2).svg)
项目简介
本项目是一个用于异步加载数据的Vue插件，模仿了Nuxt.js的asyncData，可简化Vue应用中异步数据的加载与处理。
项目的主要特性和功能
- 异步数据加载：通过定义init和fetch方法拉取和加载异步数据，fetch需返回Promise对象。
- 延时刷新：内部有队列，利用nextTick机制实现延时刷新，避免一个tick内重复刷新。
- 队列控制：提供
suspend、resume和clean方法，可精准控制队列是否执行、恢复自动刷新及清空队列。 - 强制刷新：使用
fetch方法可强制将异步数据加入队列。 - 支持监听：
watch选项可监听data、prop或computed，变化时触发数据重新拉取。 - 支持mixin：asyncData和data一样支持mixin。
安装使用步骤
假设用户已下载本项目的源码文件：
1. 安装依赖：在项目根目录下执行以下命令安装插件。
bash
npm i --save @zyyz/vue-async-data
2. 引入插件：在Vue组件中引入AsyncDataMixin。
javascript
import AsyncDataMixin from '@zyyz/vue-async-data'
3. 定义asyncData：在组件内定义asyncData对象，包含数据名称、初始化函数、数据拉取函数等。
```javascript
{
name: 'app',
mixins: [AsyncDataMixin],
asyncData: {
message: {
watch: ['id'],
init () {
return ''
},
fetch () {
return new Promise((resolve) => {
setTimeout(() => {
resolve('hello world')
}, 1000)
})
},
error (response) {
}
},
otherSomeData: {
init () {
return 1
},
fetch () {
return new Promise((resolve, reject) => {
// ...
})
}
}
},
data () {
return {
id: 0
}
},
methods: {
refresh () {
this.$async.fetch('message')
this.$async.fetch('otherSomeData')
},
suspend () {
this.$async.suspend()
},
resume () {
this.$async.resume()
}
}
}
4. 构建源码：如需对源码进行构建，可执行以下命令。bash
npm run build
```
注：本项目未对Promise等polyfill做处理，使用时需注意兼容性。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】