Fully typed store as option in typescript starter

[Evertvdw]

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.

[Evertvdw]

As requested @IlCallo.

[Smrtnyk]

I have to admit I am not really a fan of involving many dependencies I have already thought whether I should continue with quasar cli based project because of additional stuff that gets involved

Vue3 provides better typescript support and store can be better typed if you pass in a symbol key when you create it

[Evertvdw]

@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 quasar create new project and have selected typescript integration.

[IlCallo]

@Evertvdw there seems to be a promising PR on Vuex 4: https://github.com/vuejs/vuex/pull/1953 Seems to be addressing this exact issue

[tommie]

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.)

[Evertvdw]

I have a PR open to add documentation on how to implement vuex-smart-module. The same will be added for Pinia I believe and that would make two alternatives for a fully typed store. Of course this could be presented as an option in the starter kit but I don't think that is absolutely necessary when there is sufficient documentation on how to add it yourself. So I'm closing this.