Day 3: Pinia State Management | Vue.js in 5 Days

Why You Need a Store

Imagine a shopping cart. The cart count shows in the navbar. The checkout button shows in the sidebar. The cart items list shows in the main view. All three components need the same data. You could pass it down through props, but that gets unwieldy fast (called 'prop drilling').

A store is a single place where shared state lives. Any component can read from it or write to it directly. Pinia is the official Vue store — it's lightweight, TypeScript-friendly, and integrates with Vue DevTools.

Creating Your First Pinia Store

Terminal

npm install pinia

src/main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())  // register Pinia with your app
app.mount('#app')

src/stores/cart.js

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

// defineStore takes an ID (must be unique) and a setup function
export const useCartStore = defineStore('cart', () => {
  // state: reactive variables
  const items = ref([])

  // getters: computed properties
  const totalItems = computed(() =>
    items.value.reduce((sum, item) => sum + item.qty, 0)
  )
  const totalPrice = computed(() =>
    items.value.reduce((sum, item) => sum + item.price * item.qty, 0)
  )

  // actions: functions that modify state
  function addItem(product) {
    const existing = items.value.find(i => i.id === product.id)
    if (existing) {
      existing.qty++
    } else {
      items.value.push({ ...product, qty: 1 })
    }
  }

  function removeItem(productId) {
    items.value = items.value.filter(i => i.id !== productId)
  }

  function clearCart() {
    items.value = []
  }

  // Return everything the component can access
  return { items, totalItems, totalPrice, addItem, removeItem, clearCart }
})

Using the Store in Components

CartIcon.vue (reads from store)

ProductCard.vue (writes to store)

💡

You can call useCartStore() in multiple components and they all share the exact same instance. Change it in one component and every other component that uses it updates automatically. That's the whole point.

Async Actions

Pinia actions can be async — just add async to the function. This is where you'd put API calls.

src/stores/users.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore('users', () => {
  const users = ref([])
  const loading = ref(false)
  const error = ref(null)

  async function fetchUsers() {
    loading.value = true
    error.value = null
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/users')
      users.value = await res.json()
    } catch (e) {
      error.value = 'Failed to load users'
    } finally {
      loading.value = false
    }
  }

  return { users, loading, error, fetchUsers }
})

UserList.vue

📝 Day 3 Exercise

Build a Shopping Cart

Create a Pinia store for a shopping cart with items, add, remove, and clear actions.
Build a ProductList.vue component with 6 hardcoded products and an 'Add to Cart' button on each.
Build a CartSidebar.vue that shows all items in the cart with quantity and price.
Add a cart item count badge to a header/navbar component — it should update live as items are added.
Add a 'Total' computed getter to the store and display it in the sidebar.
Add a 'Remove' button per cart item and a 'Clear Cart' button.

Day 3 Summary

Pinia stores hold shared state that multiple components need to access.
A store has three parts: state (refs), getters (computed), and actions (functions).
Call useYourStore() in any component. They all share the same reactive instance.
Actions can be async — put your API calls there and track loading/error state in the store.
With Pinia's setup store syntax, it feels exactly like <script setup>.

→

← Previous

Day 2: Reactivity: ref, reactive, computed, watchers

Day 4: Vue Router: Multi-Page Apps

→

Pinia State Management

Why You Need a Store

Creating Your First Pinia Store

Using the Store in Components

{{ product.name }}

Async Actions

Day 3 Summary