Suggest an editImprove this articleRefine the answer for “What is Pinia?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Pinia** is a modern, officially recommended global state management library for Vue.js, created as a replacement for Vuex. **Key point:** Pinia is a way to store an application's shared data (user, cart, settings) and use it in any component.Shown above the full answer for quick recall.Answer (EN)Image**Pinia** is a modern, officially recommended **global state management** library for Vue.js. It was created as a replacement for Vuex, and starting with Vue 3, Pinia is considered the **standard for working with global state**. In simpler terms: **Pinia is a way to store an application's shared data (user, cart, settings) and use it in any component.** --- ## Why do you need Pinia? As an application grows, it becomes inconvenient to pass data through props or keep it in a single component. For example: - user authentication - a shopping cart - theme settings - a list of categories - global notifications This data is needed by different parts of the application → so it needs to be stored **globally** → in **Pinia**. --- ## The main advantages of Pinia ### 1) Simple API Pinia is lighter than Vuex: - no huge boilerplate - no mandatory mutations - minimal ceremony - logic is written in plain JavaScript --- ### 2) Full typing out of the box (TypeScript) Pinia was built with TS in mind; everything is typed automatically. --- ### 3) Reactivity like in the Composition API You can use `ref` and `reactive` directly in a store. --- ### 4) Support for SSR, DevTools, and Hot Module Reload Very convenient in large projects. --- ### 5) Easy splitting into modules Each store is like a separate module: ```javascript user store cart store products store theme store ``` --- ## A simple example: creating a store ### `stores/user.js` ```javascript import { defineStore } from 'pinia' export const useUserStore = defineStore('user', { state: () => ({ user: null, isLoggedIn: false }), actions: { login(user) { this.user = user this.isLoggedIn = true }, logout() { this.user = null this.isLoggedIn = false } } }) ``` --- ## Usage in a component ```javascript <script setup> import { useUserStore } from '@/stores/user' const userStore = useUserStore() console.log(userStore.user) userStore.login({ name: "Tim" }) </script> ``` --- ## What entities does Pinia have? A Pinia store consists of: #### `state` The data store (reactive): ```javascript state: () => ({ count: 0 }) ``` #### `getters` The equivalent of computed: ```javascript getters: { doubleCount(state) { return state.count * 2 } } ``` #### `actions` The methods of your store: ```javascript actions: { increment() { this.count++ } } ``` --- ## When should you use Pinia? When: - data is needed by several components - data must survive across pages - you need to avoid "prop drilling through 5 levels" - you need to centrally store the user, products, settings, filters - you need to cache API requests --- ## Summary (short) **Pinia is a simple, modern, and flexible global state management library for Vue.js.** It: - replaces Vuex, - works like the Composition API, - is simple and typed-friendly, - makes it easy to share state between components.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.