Pinia for Vue: defineStore and storeToRefs
Define a Pinia store with defineStore, access it in components, use storeToRefs to keep reactivity when destructuring state.
What Is Pinia?
Pinia is the official state management library for Vue 3. It replaces Vuex with a simpler, type-safe, DevTools-integrated API that feels like Composition API.
Installing Pinia
Install and register the Pinia plugin with the Vue app.
npm install pinia
// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');All lessons in this course
- Redux Toolkit: createSlice and configureStore
- Zustand for Lightweight React State
- Pinia for Vue: defineStore and storeToRefs
- When to Use Global vs Local State