npm i -S 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.
- 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:
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.doSomethingpayload;await storeApi.someModule.actions.doSomethingpayload;storeApi.mutations.doSomethingpayload;storeApi.someModule.mutations.doSomethingpayload;
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:
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.
- Added tests
- Fixed namespaced modules logic.
- Fixed Promise type for actions.
- Fixed typing of submodules.
- Adjusted the
store.module.mutations.mutationto make it easier to use (same thing for state, actions and getters).
- Modules are accessed directly from the store now.
- Improve tests.
- Add better payload resolution.
- Fix typos in the documentation.