Vue Pinia Explained — Modern State Management for Vue

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Vue Pinia Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Pinia is the official Vue state management library for Vue 3, offering a simpler API with full TypeScript support, DevTools integration, and no mutations boilerplate.

What You'll Learn

Pinia store creation (defineStore)
State, getters, and actions
Composition API stores
Using stores in components
Plugins and TypeScript

Why It Matters

Pinia is the recommended replacement for Vuex. It removes mutations, provides better TypeScript inference, and integrates naturally with the Composition API.

// stores/tasks.js
import { defineStore } from "pinia";
import { ref, computed } from "vue";

export const useTaskStore = defineStore("tasks", () => {
  const tasks = ref([]);
  const loading = ref(false);

  const pendingTasks = computed(() =>
    tasks.value.filter((t) => !t.completed)
  );

  const completedTasks = computed(() =>
    tasks.value.filter((t) => t.completed)
  );

  async function fetchTasks() {
    loading.value = true;
    try {
      const res = await fetch("/api/tasks");
      tasks.value = await res.json();
    } finally {
      loading.value = false;
    }
  }

  function addTask(task) {
    tasks.value.push(task);
  }

  function toggleTask(taskId) {
    const task = tasks.value.find((t) => t.id === taskId);
    if (task) task.completed = !task.completed;
  }

  return { tasks, loading, pendingTasks, completedTasks, fetchTasks, addTask, toggleTask };
});

Expected output: A Pinia store with reactive state, computed getters, and actions for async fetching and task management.

← Previous Vuex State Management Explained — Centralized Store Next → Vue HTTP Requests with Axios — Complete Guide

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Vue