PINIA

1. Basics

1.1. What is PINIA?

1.1.1. It is a State Management Solution

1.1.1.1. Uses the new reactivity system in Vue 3

1.1.2. Implemented by

1.1.2.1. Eduardo San Martin Morote

1.1.2.1.1. Vue Core Team Member

1.1.2.1.2. Who also created the Vue Router

1.1.3. Officially Recommended

1.1.4. Officially Replaced Vuex

1.2. What is the purpose of it?

1.2.1. Share data between components

1.2.2. Reduce the complexity of the components communication

1.2.2.1. Reduce data emitting to parents

1.2.2.2. Reduce props passing to children

1.2.3. Introduce a global state that is sharable between components

1.2.4. Provide a single state and pass out to components

1.2.5. Provide mechanism to components to mutate

1.3. When to introduce PINIA?

1.3.1. When you work on medium or large projects

1.3.2. Above 10 components

1.3.3. When the project projects growth

1.4. Why PINIA?

1.4.1. Intuitive

1.4.2. Type Safe

1.4.2.1. autocompletion

1.4.3. Devtools Support

1.4.3.1. Hooks into devtools for enhanced development experience

1.4.3.1.1. View and Alter states directly from devtools

1.4.3.1.2. U can use timeline to view mutation to the store overtime

1.4.4. Extensible

1.4.4.1. Transactions

1.4.4.2. Local Storage Syncronization

1.4.5. Modular

1.4.5.1. Options for code split by stores

1.4.5.2. Multiple stores creation

1.4.6. Grouping of state changes

1.4.7. Lightweight By Design

1.4.7.1. 1KB

2. Vuex vs Pinia

2.1. Install

2.1.1. Pinia

2.1.2. Vuex

2.2. Setup

2.2.1. Pinia

2.2.2. Vuex Global Object

2.3. Usage

2.3.1. Vuex Example

2.3.2. Pinia Example

2.4. Performance

2.4.1. Pinia and Vuex both fast

2.4.1.1. Pinia can be faster in cases

2.4.1.1.1. performance boost can be attributed to Pinia’s size. Pinia is extremely lightweight. It is around 1KB.

2.4.2. some features like time traveling and editing are still not supported because Vue devtools doesn’t expose the necessary APIs

2.5. Author opinion who also participate in Vuex development

2.5.1. Pinia tries to stay as close to Vuex’s philosophy as possible. It was designed to test out a proposal for the next iteration of Vuex and it was a success as we currently have an open RFC for Vuex 5 with an API very similar to the one used by Pinia. My personal intention with this project is to redesign the experience of using a global Store while keeping the approachable philosophy of Vue. I keep the API of Pinia as close as Vuex as it keeps moving forward to make it easy for people to migrate to Vuex or to even fusion both projects (under Vuex) in the future.

2.6. Pros&Cons

2.6.1. Pinia

2.6.1.1. Pro

2.6.1.1.1. Full TypeScript support: adding TypeScript is easy compared to adding TypeScript in Vuex Extremely lightweight (weighing around 1KB) The store’s actions are dispatched as regular function calls rather than using the dispatch method or MapAction helper function, which is common in Vuex Has support for multiple stores Has support for Vue devtools, SSR, and webpack code splitting

2.6.1.2. Cons

2.6.1.2.1. No support for debugging features like time traveling and editing

2.6.2. Vuex

2.6.2.1. Pro

2.6.2.1.1. Supports debugging features like time traveling and editing Suitable for large-scale and high complexity Vue.js projects

2.6.2.2. Cons

2.6.2.2.1. As of Vue 3, the getter’s result is not cached as the computed property does Vuex 4 has some problems associated with type safety