Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tianfanfan/vuex-action-monitor
vuex-action-monitor
https://github.com/tianfanfan/vuex-action-monitor
Last synced: about 1 month ago
JSON representation
vuex-action-monitor
- Host: GitHub
- URL: https://github.com/tianfanfan/vuex-action-monitor
- Owner: tianfanfan
- License: mit
- Created: 2019-07-25T06:24:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-08T09:30:32.000Z (over 1 year ago)
- Last Synced: 2024-10-16T22:15:12.791Z (3 months ago)
- Language: JavaScript
- Size: 104 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# vuex-action-monitor
[](https://travis-ci.com/tianfanfan/vuex-action-monitor)
[](https://www.npmjs.com/package/vuex-action-monitor)
[](https://www.npmjs.com/package/vuex-action-monitor)
[](https://github.com/tianfanfan/vuex-action-monitor/blob/master/LICENSE)
[](https://github.com/tianfanfan/vuex-action-monitor/pulls)
[](https://github-tools.github.io/github-release-notes/)
### Table of Contents
- [Feature](#Feature)
- [Install](#Install)
- [License](#license)
### Introduction
vuex-action-monitor is a library that monitor all vuex actions's start and end.
### Install
```sh
npm install -S vuex-action-monitor
```
### Use in store
Install and use in store.js:
```javascript
// store.js or store.ts
import Vue from 'vue'
import Vuex from 'vuex'
import actionMonit from 'vuex-action-monitor'
const actionMonitor = actionMonit({
log: true,
key: 'loading'
})
Vue.use(Vuex)
Vue.use(actionMonitor)
const store = new Vuex.Store({
plugins: [actionMonitor],
state: {},
mutations: {},
actions: {
async foo(context, payload) {
await new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 3000)
})
},
async bar(context, payload) {
await new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 3000)
})
}
}
})
export default store
```
### Use in Component
```html
{{ $loadingC(['foo', 'bar']) }}
{{ $loadingB(['foo', 'bar']) }}
{{ $loadingB([['foo', 'bar']]) }}
{{ $store.state.loading.b }} {{ $loadingB('foo') }} {{ $loadingC('foo') }}
export default {
data() {
return {}
},
computed() {
// you can use methods
fooLoadingCount() {
return this.$loadingC("foo");
},
// you can use methods
loadingCBoolean() {
return this.$loadingB("foo");
},
// 你也可以通过此方式拿到真实数据
// you can use state
fooLoadingCount2() {
return this.$store.state.loading.b.foo
}
// 你也可以通过 getter 计算
// you can use getter
fooLoadingCount3() {
return this.$store.getters.['loading/stateC']('foo')
}
}
}
```
### Options
- `log`(required: `false`, default: `false`): need console log the state or not.
- `key` (required: `false`, default: `loading`): the key of this module in vuex store.
- `logIgnore` (required: `false`, default: `[]`): the name of log ignore action.
### Feature
Then you will have two getters function in any vue components
- `$loadingC`: `$loadingC(string | string[])` Returns the total of all activie actions.
- `$loadingB`: `$loadingB(string | string[ string | string [] ])` Returns the boolean of activie actions, if receive a two-dimensional array ,the first dimension's relationship is `or` the second dimension's relationship is `and`.
### License
[MIT](./LICENSE)
[⬆ Back to Top](#user-content-table-of-contents)