💚 Vue.js Beginner

What is Pinia?

Answer

Pinia is the official state management library for Vue 3, created by Eduardo San Martin Morote (core Vue team member). It is lighter, simpler, and has better TypeScript support than Vuex. Defining a store: import { defineStore } from "pinia"; export const useUserStore = defineStore("user", { state: () => ({ users: [], currentUser: null, loading: false }), getters: { activeUsers: (state) => state.users.filter(u => u.active) }, actions: { async fetchUsers() { this.loading = true; this.users = await api.getUsers(); this.loading = false; }, logout() { this.currentUser = null; } } });. Setup stores (Composition API style): export const useUserStore = defineStore("user", () => { const users = ref([]); const activeUsers = computed(() => users.value.filter(u => u.active)); async function fetchUsers() { users.value = await api.getUsers(); } return { users, activeUsers, fetchUsers }; });. Using in components: const store = useUserStore(); store.users; // state store.activeUsers; // getter store.fetchUsers(); // action store.$patch({ loading: false }); // patch multiple props. Pinia vs Vuex: No mutations (actions can directly modify state), simpler API, modular by design, better TypeScript inference, DevTools support, SSR-friendly. Install: npm install pinia; app.use(createPinia()).