vuex-class | Binding helpers for Vuex and vue-class-component | State Container library

I have following package.json

I'd like to use vuex-class for binding helpers for vuex and vue-class-component

But it says

error Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.

App.vue

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?

I am displaying a sidebar which is open by default using the following:

How can I get access to Vuex outside of a Vue component with vuex-class?

In normal situation it is pretty simple: