Vuex Fundamentals

Feature       │ Vuex 4               │ Pinia
─────────────────────────────────────────────────
State         │ state: {}            │ ref() / reactive()
Read State    │ store.state.count    │ store.count
Change State  │ Only via mutations   │ Directly or via actions
Mutations     │ Required             │ Not needed
Actions       │ For async ops        │ Any function (sync/async)
Getters       │ Separate getters: {} │ computed()
Modules       │ Complex setup        │ Separate store files
TypeScript    │ Difficult            │ Excellent
DevTools      │ Supported            │ Supported
Learning Curve│ Steep                │ Gentle

npm install vuex@4

// src/store/index.js — Vuex store
import { createStore } from 'vuex'

export const store = createStore({

  // STATE: Single source of truth
  state() {
    return {
      count: 0,
      user: null,
      products: [],
      cart: [],
      loading: false,
      error: null
    }
  },

  // GETTERS: Computed values from state
  getters: {
    doubleCount: (state) => state.count * 2,
    cartTotal: (state) => state.cart.reduce((sum, item) => sum + item.price * item.qty, 0),
    cartItemCount: (state) => state.cart.reduce((sum, item) => sum + item.qty, 0),
    isLoggedIn: (state) => !!state.user,
    activeProducts: (state) => state.products.filter(p => p.active),
    // Getter that returns a function (for parameterized getters)
    productById: (state) => (id) => state.products.find(p => p.id === id)
  },

  // MUTATIONS: Synchronous state changes (ONLY way to change state)
  mutations: {
    INCREMENT(state) {
      state.count++
    },
    SET_COUNT(state, payload) {
      state.count = payload
    },
    SET_USER(state, user) {
      state.user = user
    },
    SET_PRODUCTS(state, products) {
      state.products = products
    },
    SET_LOADING(state, loading) {
      state.loading = loading
    },
    SET_ERROR(state, error) {
      state.error = error
    },
    ADD_TO_CART(state, product) {
      const existing = state.cart.find(i => i.id === product.id)
      if (existing) existing.qty++
      else state.cart.push({ ...product, qty: 1 })
    },
    REMOVE_FROM_CART(state, productId) {
      state.cart = state.cart.filter(i => i.id !== productId)
    }
  },

  // ACTIONS: Can be async. Call mutations to change state.
  actions: {
    async fetchProducts({ commit }) {
      commit('SET_LOADING', true)
      commit('SET_ERROR', null)
      try {
        const res = await fetch('/api/products')
        const products = await res.json()
        commit('SET_PRODUCTS', products)
      } catch (error) {
        commit('SET_ERROR', error.message)
      } finally {
        commit('SET_LOADING', false)
      }
    },

    async login({ commit }, credentials) {
      const res = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify(credentials),
        headers: { 'Content-Type': 'application/json' }
      })
      const user = await res.json()
      commit('SET_USER', user)
      return user
    },

    addToCart({ commit }, product) {
      commit('ADD_TO_CART', product)
    }
  }
})

import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'

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

<script setup>
import { computed } from &#039;vue'
import { useStore } from &#039;vuex'

const store = useStore()

// Reading state
const count = computed(() => store.state.count)
const user = computed(() => store.state.user)

// Using getters
const doubleCount = computed(() => store.getters.doubleCount)
const cartTotal = computed(() => store.getters.cartTotal)
const getProduct = (id) => store.getters.productById(id)

// Committing mutations (sync state changes)
function increment() {
  store.commit(&#039;INCREMENT')
}

function setCount(value) {
  store.commit(&#039;SET_COUNT', value)
}

// Dispatching actions (async operations)
async function loadProducts() {
  await store.dispatch(&#039;fetchProducts')
}

async function login(credentials) {
  await store.dispatch(&#039;login', credentials)
}
</script>

<template>
  <p>Count: {{ count }} (double: {{ doubleCount }})</p>
  <button @click="increment">+</button>
  <button @click="loadProducts">Load Products</button>
</template>

// store/modules/auth.js
const authModule = {
  namespaced: true,  // Access with 'auth/login' etc.
  state: () => ({ user: null, token: null }),
  getters: {
    isLoggedIn: (state) => !!state.user
  },
  mutations: {
    SET_USER(state, user) { state.user = user },
    SET_TOKEN(state, token) { state.token = token },
    LOGOUT(state) { state.user = null; state.token = null }
  },
  actions: {
    async login({ commit }, credentials) { /* ... */ },
    logout({ commit }) { commit('LOGOUT') }
  }
}

// store/index.js with modules
import { createStore } from 'vuex'
import authModule from './modules/auth'
import cartModule from './modules/cart'

export const store = createStore({
  modules: {
    auth: authModule,
    cart: cartModule
  }
})

// In component with namespaced module:
store.getters['auth/isLoggedIn']
store.commit('auth/SET_USER', user)
store.dispatch('auth/login', credentials)