Why Pinia vs Vuex for Vue 3? [closed]

In short, Pinia’s API is much simpler and intuitive. It makes using stores a breeze, even for junior devs.

It brings the benefits of Composition API, but has a structure which greatly resembles the Options API, which you’re probably familiar with:

  • has a reactive state, equivalent of data function in Options API
  • has getters, equivalent of computed in Options API
  • has actions, equivalent of methods in Options API
  • does not have mutations, as any change to state now registers an implicit mutation, regardless of where it’s performed

Additionally, in Pinia:

  • actions are no longer necessarily async, they can be either
  • actions don’t need (and don’t have) the first param (action context) as you no longer need commit, dispatch, rootGetters, rootState
  • other stores can now be invoked directly in any actions/getters, even allowing cyclic dependencies; this reduces the need to nest stores, although still possible
  • all stores are now dynamically registered at runtime (when they are invoked for the first time; the store starts empty)
  • inside actions and getters functions, this is the current store and provides direct access to all state props, actions and getters
  • you also have typed direct access to all actions, getters and state props on the object returned by the function (e.g: useSomeStore) returned by defineStore(); it’s all TypeScript friendly, no workarounds or type casting required.

More in-depth explanations and reasoning on the dedicated page to differences between the two plugins.

According to declarations by plugin authors, Vuex 5 will have a similar API to Pinia’s and they are likely to merge at some point.

As outlined in comments by Tony, Pinia is now the officially recommended state management solution by Vue team.

Vuex is now in maintenance mode. It still works, but will no longer receive new features. It is recommended to use Pinia for new applications. — [added by Evan You in dec 2021].


Ref:

“what has changed from Vue 2 to Vue 3, that makes Pinia a better fit for Vue 3?”

Pinia was designed for usage in setup(). So much so, that it has a dedicated page on how to use it outside of setup().

More importantly, you are implying Vuex is a better fit for Vue2 projects.
Technically, that is false.

Both plugins offer the same functionality but Vuex has more boilerplate and, overall, a less intuitive syntax. Therefore it requires better trained engineers, for longer periods of time.

If you choose Vuex, your project costs will grow proportionally with your project’s complexity, without any benefits.

Leave a Comment