vue-property-decorator VS vuex-module-decorators

In my last project these two were used a lot: https://github.com/kaorun343/vue-property-decorator and https://class-component.vuejs.org/

Designed for vue 3, do the same work like vue-class-component and vue-property-decorator.

When I was using Vue2 along with vue-class-component and vue-property-decorator it was easy to synchronize v-models between components simply using @ModelSync(). When Vue 3 came out with its Composition API another way was needed to achieve the same result as if Class Component was used.

This is still not better than Vue Class Component & Vue Property Decorator . Very easy syntax, looks like any other OOP language, and looks so much cleaner.

vue-property-decorator: This library works hand in hand with vue-class-component so that you can define properties/methods on your class for things like watchers, properties, etc:

The next thing to tackle for a scalable application is, that we want to have a well written component that is easy to read and to reuse. Vue components are usually single file, which has it's benefits (e.g. if you want to change some css, and then html and oh, you also need to introduce this property in typescript...). It's also easier to maintain some code standard about how large a component should possibly become, if you had single file components (e.g. >250loc => linter error). To additionally increase readability, I like to use typescript class components flavoured with vue property decorators.

Here, we will cover only the basics, the idea is in the future to create an article on Vue-Property-Decorator that complements the usage of this library.

Vue2 não é muito bom pra lidar com typescript de forma vanilla, então o próprio core team e a comunidade criaram soluções pra você ter sintaxes alternativas (nada muito diferente) que suportam os toolings mais modernos e que tiveram maior adoção no decorrer dos últimos anos, como o vue-class-component, vue-property-decorator e o vuex-class. O caso mais notório de ferramenta que tira proveito disso, com certeza é o typescript. Com essas tecnologias, usar typescript é 100% possível, e usando essas sintaxes alternativas, diria até que o código fica mais enxuto e claro do que o vue sem nada (@Action do vuex-class, pra mim, tem uma sintaxe mais agradável que mapActions do vuex cru, por exemplo). Começamos o projeto sem, mas o Brunão começou a implementar usando isso e com uma curva bem pequena de aprendizado, aderimos felizes ao novo método de escrever componentes vue2.

The most important thing to realise is that the vuex-module-decorators class-based model behaves just like a vue-class-component under the hood.

This is my current favorite way to use TS+Vuex. It just clicks so much more in my head to do things like:

vuex-module-decorators: This one, I just realized, I use a little differently than I think is expected. Here is an example from their docs of what you can write and what it is equivalent to in "raw vuex":

If you're on Vue 2 I'd recommend this NPM https://github.com/championswimmer/vuex-module-decorators

Using https://github.com/championswimmer/vuex-module-decorators. Every module is 'dynamic' so you don't have to predefine your entire store in an object. here is a small example: