typed-vuex-store
v1.1.3
Published
A easy and typeSafe way to use vuex
Downloads
14
Readme
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.