# @cooper-ding/vue-async-data

> fetch data from remote

Latest version **1.0.0** (published 2018-12-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install @cooper-ding/vue-async-data
pnpm add @cooper-ding/vue-async-data
yarn add @cooper-ding/vue-async-data
bun add @cooper-ding/vue-async-data
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-12-15 |
| First published | 2018-12-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | coober-ding |
| Maintainers | cooper-ding |
| Keywords | vue, async |

## Links

- npm: https://www.npmjs.com/package/@cooper-ding/vue-async-data
- Repository: https://github.com/Coober-Ding/vue-async-data2
- Homepage: https://github.com/Coober-Ding/vue-async-data2#readme
- Issues: https://github.com/Coober-Ding/vue-async-data2/issues
- npm.io page: https://npm.io/package/@cooper-ding/vue-async-data

## Alternatives

- [@commercetools/sync-actions](https://npm.io/package/@commercetools/sync-actions.md) — 25.1K weekly downloads
- [cwait](https://npm.io/package/cwait.md) — 21.4K weekly downloads
- [@ledgerhq/hw-app-cosmos](https://npm.io/package/@ledgerhq/hw-app-cosmos.md) — 4.2K weekly downloads
- [@financial-times/o-loading](https://npm.io/package/@financial-times/o-loading.md) — 2.8K weekly downloads
- [fa](https://npm.io/package/fa.md) — 185 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-12-15

## README

# vue-async-data
## Get Start

### Installation
```bash
npm i --save vue-async-data2
```
### example
```java script
import AsyncDataMixin from 'vue-async-data2'
{
name: 'app',
mixins: [AsyncDataMixin],
asyncData: {
  message: {// data name
    watch:['id'],// watch a data or prop to reload data
    init () {//a function to init the data
      return ''
    },
    fetch () {// a function to fetch data from remote,must return a promise object
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve('hello world')
        }, 1000)
      })
    }
  },
  otherSomeData: {
    init () {
      return 1
    },
    fetch () {
      return new Promise((resolve, reject) => {
        ..........
      })
    }
  }
  // all promise object will be resolved by Promise.all()
},
data () {
  return {
    id: 0
  }
}
```
##Description
一个用来异步加载数据的vue插件，模仿了nuxt.js的aysncData。
init和fetch这两个选项是必填的，fetch函数返回的必须是一个Promise对象。watch选项可以watch一个或多个data、prop或computed，其实就是利用了$watch()。
请求数据的时机是activated和mounted这两个生命周期钩子。
asyncData和data一样支持mixin。
所有的asyncData都被Promise.all处理，有一个失败就导致所有的asyncData不会被更新，一般一个页面也就一个asyncData。
##TODO
请求失败的异常处理还没做，问题不大。
##rollup
已经用rollup对src目录下的代码进行了打包，并用babel转译了一下。但是Promise等polyfill没有做处理，polyfill都是在项目中处理的。
##源码构建
```bash
npm run build
```

---
_Source: https://npm.io/package/@cooper-ding/vue-async-data · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._