This repo is to summarize patterns I used when organizing Vuex code and demonstrate a migrated method to protect typescript's typing inference along the Vuex code path, meaning "as few implicit any or explicit type cast as possible".
This method is opinioned and maybe not fit exactly to your style:
- It bases on and complements Vuex4 and Vue3 Composition API.
- It assumes a strong style for organizing an application's Vuex code.
- It advises using only getters, mutations, actions, rather than direct access to Vuex store's state.
The fundamental concept is to leverage the Vuex store's endpoints, such as a getter key, in the same way as InjectionKey from Vue3 codebase, to carry types where use them.
All helper functions were gathered in source typed-helpers.ts. You can copy it to your application repo.
For usage, you can look up the store implementation and the component's setup method.
- You might be interested in the ongoing discussion for Vuex5 (in May 2021), which would be designed and implemented especially for Vue3 Composition API.
- Vuex repo has issues (1725, 1695) related to the same purpose and members contributed many helpful libraries and PRs. Among them, owlsdepartment/vuex-typed is the most similar solution, while targeting previous versions and more complex.