vuex-module-decorators | ES7 Decorators to create Vuex modules | State Container library

I cannot find an answer to this question anywhere.

I went through the official Nuxt documentation and through the existing Stack Overflow and Github issue discussions.

Implementation of the AuthModule:

I have async function named save in a my component

I am trying to setup a vue3 app with i18n localization. The localization is supposed to be located in json files. I added i18n via vue add i18n to my project. The questions asked during installation were all answered with the default value except the one with the legacy support (my answer: no). When i try to use a text from a json file, it will tell me in the console [intlify] Not found 'message' key in 'en' locale messages. The local translations work just fine. And i have no clue why it is not working with the translations provided in the JSON file.

Here is my code:

packages.json

I have 1 app using the vue pwa plugin, it works great.

The vuejs config for the app looks like this:

I am using nuxtjs with typescript and use vuex-module-decorators. but I get error when add @nuxtjs/auth to my project.

Uncaught (in promise) Error: ERR_STORE_NOT_PROVIDED: To use getModule(), either the module should be decorated with store in decorator, i.e. @Module({store: store}) or store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store)

This error happen when call Action.

When @nuxtjs/auth from modules it's ok.

store/index.ts

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'm using vuex-module-decorators and I would like to know if I should set the default value of a data property to null or undefined. Example:

I am using vue-prop-decorator and Quasar Framework. I have a component, in which I recieve a prop, defined as follow:

I am currently trying to retrieve the tags in the Searchbar module from Vuex. However, it is not reactive.

Here is the component :