Creating Single Page Applications (SPAs) with Vue.js — A Complete Beginner’s Guide

📘 Chapter 5: State Management with Pinia or Vuex

🧭 What You’ll Learn

By the end of this chapter, you’ll be able to:

• Understand what state management is in a Vue SPA
• Identify when and why you need a store like Pinia or Vuex
• Set up and use Pinia in a Vue 3 application
• Learn the basics of Vuex (for existing Vue 2/legacy projects)
• Share data between components
• Use actions, mutations (Vuex), getters, and modules
• Choose the right tool for your project

🧠 What Is State Management?

In a Vue.js application, "state" refers to the data that your components rely on: user input, fetched data, UI flags, etc.

When apps grow, managing state becomes difficult because:

• Props and events become hard to track
• Components are deeply nested
• Many parts of the app need access to the same data

This is where a centralized store comes in—Pinia and Vuex are tools that help manage this shared data in a predictable, scalable way.

📦 Common Use Cases for a Global Store

🧩 Pinia vs. Vuex: What's the Difference?

TL;DR: Use Pinia for Vue 3. Use Vuex only for legacy Vue 2 apps or if already integrated.

⚡ Getting Started with Pinia (Vue 3)

✅ Step 1: Install Pinia

bash

npm install pinia

✅ Step 2: Register Pinia in main.js

js

import { createApp } from 'vue'

import App from './App.vue'

import { createPinia } from 'pinia'

const app = createApp(App)

app.use(createPinia())

app.mount('#app')

✅ Step 3: Create a Store

Create src/stores/counter.js:

js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {

  state: () => ({

    count: 0

  }),

  getters: {

    doubleCount: (state) => state.count * 2

  },

  actions: {

    increment() {

      this.count++

    },

    reset() {

      this.count = 0

    }

  }

})

✅ Step 4: Use the Store in Components

Example: Counter.vue

vue

<script setup>

import { useCounterStore } from '../stores/counter'

const counter = useCounterStore()

</script>

<template>

  <div>

    <p>Count: {{ counter.count }}</p>

    <p>Double: {{ counter.doubleCount }}</p>

    <button @click="counter.increment">+</button>

    <button @click="counter.reset">Reset</button>

  </div>

</template>

🧠 What Makes Pinia Developer-Friendly?

• Supports TypeScript out of the box
• No need to use mapState, mapActions (unlike Vuex)
• Reactive like Vue’s Composition API
• Better DX for smaller and larger apps

🔒 Vuex Overview (Vue 2/Legacy Projects)

✅ Step 1: Install Vuex

bash

npm install vuex@next

✅ Step 2: Create a Vuex Store

js

// store/index.js

import { createStore } from 'vuex'

const store = createStore({

  state: {

    count: 0

  },

  getters: {

    doubleCount: (state) => state.count * 2

  },

  mutations: {

    increment(state) {

      state.count++

    },

    reset(state) {

      state.count = 0

    }

  },

  actions: {

    incrementAsync({ commit }) {

      setTimeout(() => {

        commit('increment')

      }, 500)

    }

  }

})

export default store

✅ Step 3: Register in main.js

js

import store from './store'

createApp(App).use(store).mount('#app')

✅ Step 4: Use Store in Components

vue

<template>

  <div>

    <p>Count: {{ $store.state.count }}</p>

    <button @click="$store.commit('increment')">+</button>

    <button @click="$store.dispatch('incrementAsync')">Async +</button>

  </div>

</template>

🎨 Pinia vs Vuex API Comparison

📁 Suggested Store File Organization (Pinia)

bash

src/

├── stores/

│   ├── counter.js

│   ├── auth.js

│   └── theme.js

Each file represents a separate domain module, keeping things modular and testable.

🔁 Sharing State Across Components

You can use the same store instance in multiple components:

vue

<script setup>

import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

</script>

<template>

  <p>The count is {{ counter.count }}</p>

</template>

If one component updates the state, all other components reactively reflect that change.

🧠 Best Practices

• Use modular stores (useAuthStore, useCartStore, etc.)
• Use getters for derived state (like filters, calculations)
• Use actions for async or complex logic
• Avoid directly mutating state outside of actions
• Keep UI logic (like show/hide modals) in the store only when shared globally

🧪 Example: Auth Store with Async Action

js

export const useAuthStore = defineStore('auth', {

  state: () => ({

    user: null,

    loading: false

  }),

  actions: {

    async login(email, password) {

      this.loading = true

      const response = await fetch('/api/login', {

        method: 'POST',

        body: JSON.stringify({ email, password })

      })

      const data = await response.json()

      this.user = data.user

      this.loading = false

    },

    logout() {

      this.user = null

    }

  }

})

🧪 Testing Pinia Stores

Testing Pinia is straightforward:

js

import { setActivePinia, createPinia } from 'pinia'

import { useCounterStore } from '@/stores/counter'

beforeEach(() => {

  setActivePinia(createPinia())

})

test('increment counter', () => {

  const counter = useCounterStore()

  counter.increment()

  expect(counter.count).toBe(1)

})

✅ Recap: When to Use a Store