Vuex-action-monitor NPM

vuex-action-monitor

Introduction

vuex-action-monitor is a library that monitor all vuex actions's start and end.

Install

  npm install -S vuex-action-monitor

Use in store

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

Use in Component

<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>

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.