Views: 197
Last Modified: 28.04.2022

Pinia is sate manager and library for Vue.js applications. It servers as a centralized storage for all app components and ensures data change/mutation predictability according to specific rules.

You can find more about Pinia 4 and the state management pattern at Pinia website.

Starting from version Vue 3, Vue developers have declared that Pinia is a recommended storage solution.

If you have previously used Vuex, then you can switch to Pinia in few steps.

Advantages and disadvantages compared to Vuex

Advantages:

  1. Simplified layout for handling storage model: instead of actions and mutations, only one type – actions.
  2. Simple modular implementation:
    • When you application requires a single or several storages, there is no need to register each module beforehand: registration is automatic as applicable.
    • Direct use of storage in another storage and operation directly via specific function call, without proxy methods:

      Vuex: this.$store.dispatch('users/addUser', {...})

      Pinia: userStore().addUser({...})

Disadvantages:

  1. New notation compared to Vuex.
  2. Global module registration. Necessitates control of module naming within the complete project and extra data manipulations for several app copies.
  3. You need pre-activate Pinia before launching the app to be able to handle storage outside the Vue application.
  4. Minimal integration with VueDevTools, unavailable import/export and Time travel features.





Courses developed by Bitrix24