What's the right way to use Vuex in a TypeScript Vue project?

Question

I'm currently learning Vue, Vuex and TypeScript and I must say I'm kinda confused about how to setup a Vuex store correctly. The documentation doesn't cover a TypeScript implementation at all (I have the feeling that documentation in general lacks fundamental TypeScript examples?) what made me (again!) look for solutions on other pages outside the official documentation (which imho shouldn't happen if a new technology is learned directly via the official resources as it should contain all the information necessary to get the technology working, right?!).

So when I looked in the world wide web for solutions, I came across the following patterns:

1. On bezkoder.com they use decorators from vuex-module-decorators to define the Vuex store modules as classes. Then, they use decorators again, but this time from vuex-class, to access the respective states, mutations and actions from their Vue components. This solution seems to be very "TypeScripty" as they make use of classes and decorators like in the official Vue TypeScript documentation.

2. On itnext.io (a Medium.com site) they use a so called "direct store" with direct-vuex. Here, they define the store itself in a more "JavaScripty" way, as all the states, mutations and actions are passed to the store instance as plain objects.

3. On dev.to and codeburst.io (another Medium.com site) they use plain TypeScript features to create their store. They therefore setup a lot of constants enums and strings and define several interfaces in a bunch of different files which are then all exported and imported again to index file of each module which then creates the respective Vuex module. This solution is somehow a mix of a "TypeScripty" and "JavaScripty" solution. It seems like that this method creates the most boilerplate code.

So now, as a Vue beginner, I'm kinda confused and I have the following questions:

• Which method (1, 2 or 3 or is there maybe another one?) should I prefer and why? What are the advantages and the disadvantages of these methods? (I searched for a comparison of the different approaches but I couldn't find anything.)
• Should I use plugins which aren't maintained by the official Vue team? How can I be sure that these plugins will get updated to work with future Vue releases? (For example in the GitHub repo from vuex-module-decorators the author explicitly says, that the plugin is just a side project of him what makes me doubt that the plugin will get long term updates.)
• Why isn't there anything about that in the official documentation? Why is the official documentation lacking so much TypeScript examples? Is there a place where I can find reliable TypeScript example and solutions to the must common scenarios?

Answer 1

i'm not allowed to comment, so i need to answer, but i also can't answer all your questions... I was in a similar situation. And am now using vuex-module-decorators. This feels, as you wrote, very typescipty and the setup was rather simple, the usage is so too.

As I have to update my code quite often and eventually update Vue.js etc... I took the risk to use this (big) dependency, knowing that i maybe have to rebuilt my stuff at some point. But using vuex-module-decorators safed me alot of time and almost never got me any problems. I don't know the other solutions but this feels to me very natural to vue and typescript.

I hope the will help

Best regards