State management is a crucial aspect of modern web applications, especially as they grow in complexity. If you’re working with Vue.js, you’ve likely heard of Pinia\u2014the official state management library that has become the recommended successor to Vuex. In this blog post, we’ll explore what makes Pinia special, why you should consider using it, and how to get started.<\/p>\n\n\n\n
What is Pinia?<\/strong><\/p>\n\n\n\n <\/p>\n\n\n\n Pinia is a lightweight, intuitive state management library for Vue.js applications. Originally developed as an experiment to explore what a next-generation Vuex could look like, it has now become the officially recommended state management solution for Vue 3 (and also supports Vue 2).<\/p>\n\n\n\n The name “Pinia” (pronounced \/pi\u02d0nj\u028c\/) comes from the Spanish word for pineapple, which is the closest fruit to the Vue logo\u2014a playful nod to the Vue ecosystem.<\/p>\n\n\n\n <\/p>\n\n\n\n Why Choose Pinia?<\/strong> Unlike Vuex, Pinia eliminates mutations entirely. You can modify state directly within actions, making your code more straightforward and reducing boilerplate:<\/p>\n\n\n\n <\/p>\n\n\n\n 2. **TypeScript Support Out of the Box**<\/strong><\/p>\n\n\n\n Pinia was built with TypeScript in mind. It provides excellent type inference without requiring complex type definitions:<\/p>\n\n\n\n 3. **Modular by Design**<\/strong><\/p>\n\n\n\n <\/p>\n\n\n\n Every store in Pinia is modular by default. There’s no need for nested modules like in Vuex. Each store is independent and can be imported where needed:<\/p>\n\n\n\n 4. **Composition API and Options API Support**<\/strong><\/p>\n\n\n\n <\/p>\n\n\n\n Pinia works seamlessly with both Vue’s Composition API and Options API, giving you flexibility in how you structure your components:<\/p>\n\n\n\n 5. **Lightweight**<\/strong><\/p>\n\n\n\n Pinia is incredibly lightweight at around 1KB (gzipped). This minimal footprint ensures your application stays fast without sacrificing functionality.<\/p>\n\n\n\n 6. **DevTools Integration**<\/strong><\/p>\n\n\n\n Pinia integrates seamlessly with Vue DevTools, providing time-travel debugging, state inspection, and action tracking\u2014essential tools for debugging complex applications.<\/p>\n\n\n\n Getting Started with Pinia<\/strong><\/p>\n\n\n\n Installation<\/strong><\/p>\n\n\n\n Install Pinia using your preferred package manager:<\/p>\n\n\n\n Setting Up Pinia<\/strong><\/p>\n\n\n\n In your main application file, create and install the Pinia instance:<\/p>\n\n\n\n Creating Your First Store<\/strong><\/p>\n\n\n\n Create a store using the `defineStore` function:<\/p>\n\n\n\n Using the Store in Components<\/strong><\/p>\n\n\n\n Access your store in any component:<\/p>\n\n\n\n Advanced Features<\/strong> Pinia also supports a setup-style syntax that feels more natural if you’re using the Composition API:<\/p>\n\n\n\n Store Composition<\/strong><\/p>\n\n\n\n Stores can use other stores, enabling powerful composition patterns:<\/p>\n\n\n\n Plugins<\/strong><\/p>\n\n\n\n Extend Pinia’s functionality with plugins for features like persistence, logging, or sync:<\/p>\n\n\n\n State Persistence Example<\/strong><\/p>\n\n\n\n One common requirement is persisting state to localStorage. Here’s a simple implementation:<\/p>\n\n\n\n
1. **Simpler API and Less Boilerplate**<\/strong><\/p>\n\n\n\n\/\/ Pinia store\nexport const useCounterStore = defineStore('counter', {\n state: () => ({ count: 0 }),\n actions: {\n increment() {\n this.count++ \/\/ Direct state mutation in actions\n }\n }\n})<\/code><\/pre>\n\n\n\nexport const useUserStore = defineStore('user', {\n state: () => ({\n name: '',\n age: 0\n }),\n getters: {\n \/\/ TypeScript automatically infers types\n isAdult: (state) => state.age >= 18\n }\n})<\/code><\/pre>\n\n\n\nimport { useUserStore } from '@\/stores\/user'\nimport { useCartStore } from '@\/stores\/cart'\n\nconst userStore = useUserStore()\nconst cartStore = useCartStore()<\/code><\/pre>\n\n\n\nnpm install pinia\n# or\nyarn add pinia\n# or\npnpm add pinia<\/code><\/pre>\n\n\n\n\/\/ main.js\nimport { createApp } from 'vue'\nimport { createPinia } from 'pinia'\nimport App from '.\/App.vue'\n\nconst pinia = createPinia()\nconst app = createApp(App)\n\napp.use(pinia)\napp.mount('#app')<\/code><\/pre>\n\n\n\n\/\/ stores\/counter.js\nimport { defineStore } from 'pinia'\n\nexport const useCounterStore = defineStore('counter', {\n state: () => ({\n count: 0,\n name: 'Counter'\n }),\n \n getters: {\n doubleCount: (state) => state.count * 2,\n doubleCountPlusOne() {\n return this.doubleCount + 1\n }\n },\n \n actions: {\n increment() {\n this.count++\n },\n async fetchData() {\n const response = await fetch('https:\/\/api.example.com\/data')\n const data = await response.json()\n this.count = data.count\n }\n }\n})<\/code><\/pre>\n\n\n\n<template>\n <div>\n <p>Count: {{ counter.count }}<\/p>\n <p>Double Count: {{ counter.doubleCount }}<\/p>\n <button @click=\"counter.increment()\">Increment<\/button>\n <\/div>\n<\/template>\n\n<script setup>\nimport { useCounterStore } from '@\/stores\/counter'\n\nconst counter = useCounterStore()\n<\/script><\/code><\/pre>\n\n\n\n
Setup Stores (Composition API Style)<\/strong><\/p>\n\n\n\nimport { ref, computed } from 'vue'\nimport { defineStore } from 'pinia'\n\nexport const useCounterStore = defineStore('counter', () => {\n const count = ref(0)\n const name = ref('Counter')\n \n const doubleCount = computed(() => count.value * 2)\n \n function increment() {\n count.value++\n }\n \n return { count, name, doubleCount, increment }\n})<\/code><\/pre>\n\n\n\nimport { defineStore } from 'pinia'\nimport { useUserStore } from '.\/user'\n\nexport const useCartStore = defineStore('cart', {\n state: () => ({\n items: []\n }),\n actions: {\n async checkout() {\n const userStore = useUserStore()\n if (!userStore.isLoggedIn) {\n throw new Error('User must be logged in')\n }\n \/\/ Proceed with checkout\n }\n }\n})<\/code><\/pre>\n\n\n\nfunction myPiniaPlugin(context) {\n context.store.$subscribe((mutation) => {\n console.log(`[${mutation.storeId}]: ${mutation.type}`)\n })\n}\n\nconst pinia = createPinia()\npinia.use(myPiniaPlugin)<\/code><\/pre>\n\n\n\nimport { defineStore } from 'pinia'\n\nexport const useSettingsStore = defineStore('settings', {\n state: () => ({\n theme: 'light',\n language: 'en'\n }),\n actions: {\n loadFromStorage() {\n const saved = localStorage.getItem('settings')\n if (saved) {\n this.$patch(JSON.parse(saved))\n }\n },\n saveToStorage() {\n localStorage.setItem('settings', JSON.stringify(this.$state))\n }\n }\n})\n\nOr use the popular `pinia-plugin-persistedstate` plugin for automatic persistence.<\/code><\/pre>\n\n\n\n