vuex-module-decorators VS direct-vuex

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:

Pinia is a relatively new state management tool for the Vue ecosystem. It is the new preferred state management tool recommended by the Vue core team replacing Vuex. Compared to Vuex, Pinia is type-safe by default (direct-vuex was needed to make Vuex type-safe), extremely lightweight, and modular by design (meaning you can create multiple stores instead of multiple modules inside one store, which optimises performance). Similar to Vuex, Pinia has state, computed properties (getters) and methods (mutations and actions). Read more about Pinia and its usage to understand the similarities and differences between Pinia and Vuex.

I then found several small community projects (1 2 3) which look like they perform that boilerplate for you and... not much else. They also require their own additional npm import, which isn't ideal.