vuex-action-monitor is a library that monitor all vuex actions's start and end.
npm install -S vuex-action-monitor
Install and use in store.js:
// 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
<template>
<div class="goodsPage">
<span> {{ $loadingC(['foo', 'bar']) }} </span>
<span> {{ $loadingB(['foo', 'bar']) }} </span>
<span> {{ $loadingB([['foo', 'bar']]) }} </span>
{{ $store.state.loading.b }} {{ $loadingB('foo') }} {{ $loadingC('foo') }}
</div>
</template>
<script>
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')
}
}
}
</script>
<style scoped></style>
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.
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 isor
the second dimension's relationship isand
.