direct-vuex VS harlem

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.

Check it out at harlemjs.com or view the demo app.

Truth is, the solution you use doesn't matter as much as how you use it. However, good starting point would be to check out Pinia and Harlem, two most popular state management libraries in Vue 3

In this article I will explain how Harlem leverages the AbortController to create a robust and elegant async cancellation pattern through the use of actions.

I've also written a state management called Harlem which is designed specifically to work well with TypeScript: https://harlemjs.com

HarlemJs

Shameless plug: if you're still wanting a non-Vuex state solution but don't want to write your own, I've written one you can use: Harlem.

From here you can extend Harlem through the use of plugins to include Vue devtools integration, server-side rendering, storage sync, transactions, snapshots and resetting.