# vue-async-loading

> Using vuex to manage the loading state of asynchronous methods

Latest version **1.1.3** (published 2020-07-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-async-loading
pnpm add vue-async-loading
yarn add vue-async-loading
bun add vue-async-loading
```

## 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.1.3 |
| Published | 2020-07-02 |
| First published | 2020-07-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 73.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Troy |
| Maintainers | wawjqyh |
| Keywords | async, vue, vuex, methods, loading |

## Links

- npm: https://www.npmjs.com/package/vue-async-loading
- Repository: https://github.com/wawjqyh/vue-async-loading
- Issues: https://github.com/wawjqyh/vue-async-loading/issues
- npm.io page: https://npm.io/package/vue-async-loading

## 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.1.3 (latest) — 2020-07-02
- 1.1.2 — 2020-07-01
- 1.1.1 — 2020-07-01
- 1.1.0 — 2020-07-01

## README

# vue-async-loading

Using vuex to manage the loading state of asynchronous methods

## Usage

```javascript
import vueAsyncLoading from "vue-async-loading";

Vue.use(vueAsyncLoading [,options]);
```

## Options

### store

Vuex instance

### handleError(err)

All error raised by the asyncMethods will be passed to the handleError handler, enabling you to implement global error handling, logging, etc.

## Demo

```javascript
import vueAsyncLoading from 'vue-async-loading';
import Vuex from 'Vuex';

Vue.use(vueAsyncLoading, {
  store: new Vuex(),
  handleError(err) {
    console.log(err);
  }
});
```

Now you can define async methods on your vm:

```javascript
<template>
  <div>
    <div v-show="$loading.global">global</div>
    <div v-show="$loading.fetchData">current component</div>
    <div v-show="$loading['demo2/fetchData']">
      other components $loading['component name/method name']
    </div>
  </div>
</template>;

export default {
  // You need to define the name to distinguish the methods of different components
  name: 'demo',

  asyncMethods: {
    fetchData() {
      return fetch('http://xxx.com/data.json');
    },

    async fetchSomething() {
      const res = await fetch('http://xxx.com/something.json');
      // do something
    }
  },

  methods: {
    testLoading() {
      console.log(this.$loading.fetchSomething);
      console.log(this.$loading['demo2/fetchData']);
      console.log(this.$loading.global);
    }
  }
};
```

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