vt

vuex-tools

A library like redux-toolkit for Vuex

Showing:

Popularity

Downloads/wk

3

GitHub Stars

8

Maintenance

Last Commit

5mos ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.8KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial