@nqdm-cfinnigan/vuex-counter

A configurable counter component which uses Vuex actions and getters

Usage no npm install needed!

<script type="module">
  import nqdmCfinniganVuexCounter from 'https://cdn.skypack.dev/@nqdm-cfinnigan/vuex-counter';
</script>

README

Vuex Counter

What it does

A configurable counter component which uses Vuex actions and getters

Props

by: How much you want to increment / decrement by [type: Number]
duration: If you want to add a time delay in milleseconds [type: Number]
counterGetter: The name of the Vuex getter you want to use to display your counter total [type: String]
incrementAction: The name of Vuex action you want to dispatch when clicking the increment button [type: String]
decrementAction: The name of Vuex action you want to dispatch when clicking the decrement button [type: String]

Example

<template>
  <div id="app">
    <Counter
      :by='500'
      :duration='100'
      :counterGetter='"stringCounter"'
      :incrementAction='"asyncIncrement"'
      :decrementAction='"asyncDecrement"'
    />
    <Counter
      :by='1500'
      :duration='100'
      :counterGetter='"stringCounterDoubler"'
      :incrementAction='"asyncIncrement"'
      :decrementAction='"asyncDecrement"'
    />
  </div>
</template>

<script>
import Counter from '@nqdm-cfinnigan/vuex-counter'
export default {
  name: 'app',
  components: {
    Counter
  }
}
</script>