https://github.com/stfalcon-studio/stfalcon-vuex-loading-plugin
https://github.com/stfalcon-studio/stfalcon-vuex-loading-plugin
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/stfalcon-studio/stfalcon-vuex-loading-plugin
- Owner: stfalcon-studio
- Created: 2019-07-05T09:45:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-09-13T08:58:46.000Z (about 6 years ago)
- Last Synced: 2025-04-13T01:06:35.385Z (8 months ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 2
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - stfalcon-vuex-loading-plugin - Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world. (Utilities [🔝](#readme))
- awesome-vue - stfalcon-vuex-loading-plugin - the easiest way to handle loading state of vuex (Components & Libraries / Utilities)
README
# vuex-loading-plugin
The plugin which including to your modules `loading logic`. When you will handle any actions you triggering `loading` mutation. When actions will be done `loading flag` came back to false. Basically, this plugin indicates async actions for you.
_Note_: This plugin also make a patch of dispatch method of the vuex, since in original implementation if action fails, then `after` subscribtion is not called. The patch fixed this thing.
### Prerequisites
This library requires vue and vuex as a peer dependency.
## Installing
```shell
npm i @stfalcon/vuex-loading-plugin
```
## Usage
### In `store.js` file
```js
import loadingPlugin from "@stfalcon/vuex-loading-plugin"
const store = new Vuex.Store({
...other store options,
plugins: [loadingPlugin(options)]
})
```
`options` contains:
- `options.blacklistFilter`: Function() - receives an action type as argument and allows to blacklist any of action by a rule.
### In `SomeComponent.vue` file
You can handle async actions of any namespaced module:
```js
computed: {
...mapGetters('yourModuleName', ['isLoading'])
}
```
If you want to listen to all async actions of all modules, then you should use global getter:
```js
computed: {
...mapGetters(['isLoading']),
}
```
This getter is just an alias for listening `loading` getters of all modules simultaniously.