Vue 3.0 has recently launched its stable v3.0.0 'One Piece' release, while Vuex 4 is currently in v4.0.0-beta.4.
Although official examples on utilizing Vuex 4 modules in TypeScript are lacking...
For better code management as modules expand, I aim to store state, mutations, getters, and actions in separate files.
To address this need, I've assembled a functional example repository on Github and Codesandbox.
Extracting guidance from these resources:
- Vuex + TypeScript by Andrew on Dev.to
- Gist javisperez/index.ts
- Repo andrewvasilchuk/vuex-typescript
- Vue 3 & Vuex 4: useStoreModule composable by Barylski on Dev.to
- A complete guide to mapping in Vuex by LogRocket
However, a few challenges remain unresolved:
1. Resolving linting errors due to dependency cycles
The typings in module's index.ts, actions.ts, and getters.ts rely on importing RootState from the main store, resulting in linting errors when using ESLint Airbnb config.
Despite not impacting store functionality directly, I seek solutions without resorting to disabling or suppressing rules.
Further exploration may determine if Standard and Prettier configs trigger similar issues, indicating potential linkage with Airbnb rules.
2. Implementing modules without actions successfully
My attempts to configure the profile module sans actions encountered type specification challenges, including an existing NON_ACTION action type within the example code.
3. Effectively applying the namespaced: true module option and its impact on component syntax
Configured with namespaced: true, the profile store necessitates a distinct usage syntax in components, unlike the documents module which lacks this option and experiences dispatch issues with action types.
PS. Any suggestions for further code optimization are appreciated through comments, answers, and pull requests!
Update 27/09/20: Noticed VS Code intellisense fail to display store instance type information post useStore function passage within components, functioning only when imported in .ts files.