-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fully typed store as option in typescript starter #8536
Comments
As requested @IlCallo. |
I have to admit I am not really a fan of involving many dependencies Vue3 provides better typescript support and store can be better typed if you pass in a symbol key when you create it |
@Smrtnyk What you mean is the InjectionKey as defined here: https://next.vuex.vuejs.org/guide/typescript-support.html#typing-store-property-in-vue-component. But that only types your store state. And as you (almost) always use getters and actions in components that is not very useful. And I only want to make this an opion when you do a |
@Evertvdw there seems to be a promising PR on Vuex 4: vuejs/vuex#1953 |
vuejs/vuex#1953 does indeed look interesting for extending the typings from state to also getter, mutations and actions. #8712 seems to have added what's needed in Quasar. (Of course, once the above PR is in, the store template should be updated.) |
I have a PR open to add documentation on how to implement |
Is your feature request related to a problem? Please describe.
Adding typescript to a project can prevent a lot of errors in a project. However one of the key aspects of a Vue project the store is not fully typed. With Vue3 and Vuex4 you can type the state of the store but every action/mutation/getter has to be typed manually in each component. This will quickly become undoable in bigger projects as you have to be very precise when you use a getter in multiple places.
Describe the solution you'd like
Better would be that you define the types of every store aspect once (state/getters/mutations/actions) and that you have that typing available when you use them in a component. That way you have defined centrally what the type of a getter or action is and you have that type automatically available in all components.
This cannot be done using Vuex alone, but with an additional package this can be achieved. I made a demo repo that uses
vuex-smart-module
to do exactly this. See here.Describe alternatives you've considered
There are multiple approaches to this, see https://betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230. I found
vuex-smart-module
the most appealing as some of the others are very much class/decorator based and even if some like this others do not.Additional context
The demo project includes a store module and a boot file that exposes the typed store as
$tstore
to all components. This is just a wrapper over the default Vuex store, meaning that the old way of accessing the store also works.I also included a dynamic module example and a way you could use that based on the route you are on to dynamically load this in the application. This is a more advanced feature but in bigger projects you probably want to do something like this as you don't need everything at the start of your application. It would be nice to include something like that also in the starter to promote this.
The text was updated successfully, but these errors were encountered: