💚 Vue.js Beginner

What is Pinia?

Why Interviewers Ask This

Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid Vue.js basics — a prerequisite for any developer role.

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()).

Pro Tip

Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex Vue.js answers easy to follow.