typed-vuex-store
TypeScript icon, indicating that this package has built-in type declarations

1.1.3 • Public • Published

Installation

npm i -S typed-vuex-store

About typed-vuex-store

A simple solution for vuex and typescript. Typed-vuex-store converts all the store actions, mutations, getters and modules to a object to make it typeSafe and easier to use.

Benefits

  • JsDocs is kept when the store is converted to a typedStore API.
  • All of the API creation is automatic so it isn't hard to implement.
  • "Go to reference" goes directly to the action/mutation/getter definition.
  • Rename symbol support between store files.
  • Intellisense for actions/mutations/getters.

Creating the store

Provided that all the options have inferred types, all you need to do is setup the store like this:

import { TypedVuexStore } from "typed-vuex-store";

export const storeApi = new TypedVuexStore({
  state,
  actions,
  mutations,
  getters,
  modules: {
    moduleA,
  },
  // other vuex store options...
});

const vueApp = new Vue({
  store: storeApi.store,
  //...
});

Then use it like this in the app/actions/mutations:

storeApi.state.bob;
storeApi.someModule.state.bob;
storeApi.someModule.getters.bob;
await storeApi.actions.doSomething();
await storeApi.actions.doSomething(payload);
await storeApi.someModule.actions.doSomething(payload);
storeApi.mutations.doSomething(payload);
storeApi.someModule.mutations.doSomething(payload);

Options inferred types

When using things like MutationTree, ActionTree or GetterTree in a const myVar: type format the type will not be inferred correctly.

To help with that, you can use a function:

import { MutationTree } from "vuex";

const createMutations = <
  T extends MutationTree<typeof state, typeof rootState>
>(
  options: T
) => options;

const mutations = createMutations({
  // mutation tree...
});

This will make sure the mutations are ok to be used for the typed store api.

you can also do something similar for the actions and getters.

Readme

Keywords

none

Package Sidebar

Install

npm i typed-vuex-store

Weekly Downloads

1

Version

1.1.3

License

MIT

Unpacked Size

22.8 kB

Total Files

10

Last publish

Collaborators

  • panda-sensei