Vuex-tools

The easiest way to deal with Vuex store modules using typescript.

Examples

Simple app counter's store module [Edit on SandBox]

import { createStore, createModule } from 'vuex-tools';

interface RootState {
  counter: {
    count: number
  }
}

const counter = createModule<RootState['counter'], RootState>({ count: 0 });

export const increment = counter.mutation('increment', state =>
  state.count = state.count + 1
);

export const decrement = counter.mutation('decrement', state =>
  state.count = state.count - 1
);

export default createStore<RootState>({
  plugins: [],
  moduleBuilders: {
    counter
  }
});

store.commit(increment());

using with Nuxt.JS [Edit on CodeBox]

// types.ts
interface RootState {
  counter: {
    count: number
  }
}

// @/store/counter.ts
import { createStore, createModule } from 'vuex-tools';

const counter = createModule<RootState['counter'], RootState>({ count: 0 });

export const increment = counter.mutation('increment', state =>
  state.count = state.count + 1
);

export const decrement = counter.mutation('decrement', state =>
  state.count = state.count - 1
);

const _module = root.getModule(/* file/module name */ 'counter');

export const mutations = _module.mutations;
export const actions = _module.actions;
export const getters = _module.getters;

Documentation

Documentation generated from source files by Typedoc.

Installation

This library is published in the NPM registry and can be installed using any compatible package manager.

npm install vuex-tools --save

# For Yarn, use the command below.
yarn add vuex-tools

Installation from CDN

This module has an UMD bundle available through JSDelivr and Unpkg CDNs.

<!-- For UNPKG use the code below. -->
<script src="https://unpkg.com/vuex-tools"></script>

<!-- For JSDelivr use the code below. -->
<script src="https://cdn.jsdelivr.net/npm/vuex-tools"></script>

<script>
  // UMD module is exposed through the "VuexTools" global variable.
  console.log(VuexTools);
</script>

License

Released under MIT License.