Pinia vs Vuex comparison - Hands-On Comparison

Pinia vs Vuex Comparison in Vue

📖 Scenario: You are building a simple Vue app to manage a shopping cart. You want to compare how to set up and use Pinia and Vuex stores for state management.

🎯 Goal: Create two stores: one using Pinia and one using Vuex. Both stores will hold a list of products and a count of items in the cart. You will then add a method to add a product to the cart and a getter to get the total number of items.

📋 What You'll Learn

Create a Pinia store with state holding products and cartCount

Create a Vuex store with state holding products and cartCount

Add an addToCart action/method to both stores that increases cartCount

Add a getter to both stores that returns the current cartCount

💡 Why This Matters

🌍 Real World

State management is key in Vue apps to keep data consistent across components. Pinia is the modern recommended store, while Vuex is the older but still widely used option.

💼 Career

Many Vue developer jobs require knowledge of state management. Understanding both Pinia and Vuex helps you work on existing projects and adopt new best practices.

1

Setup Pinia store with initial state

Create a Pinia store named usePiniaStore with state containing products as an array with 'apple' and 'banana', and cartCount set to 0.

Vue

// Your code here to create Pinia store with products and cartCount

Need a hint?

Use defineStore from Pinia and return an object with products and cartCount in state.

2

Setup Vuex store with initial state

Create a Vuex store named store with state containing products as an array with 'apple' and 'banana', and cartCount set to 0.

Vue

import { createStore } from 'vuex'

// Your code here to create Vuex store with products and cartCount

Need a hint?

Use createStore from Vuex and return an object with products and cartCount in state.

3

Add addToCart method/action to both stores

Add an addToCart method to the Pinia store that increases cartCount by 1. Also add an addToCart action to the Vuex store that commits a mutation to increase cartCount by 1. Add the mutation named incrementCartCount to Vuex store.

Vue

import { defineStore } from 'pinia'

export const usePiniaStore = defineStore('main', {
  state: () => ({
    products: ['apple', 'banana'],
    cartCount: 0
  }),
  // Your code here to add addToCart method
})

import { createStore } from 'vuex'

export const store = createStore({
  state() {
    return {
      products: ['apple', 'banana'],
      cartCount: 0
    }
  },
  // Your code here to add mutations and actions
})

Need a hint?

In Pinia, add addToCart inside actions that increments cartCount. In Vuex, add a mutation incrementCartCount and an action addToCart that commits this mutation.

4

Add getter for cartCount in both stores

Add a getter named cartItems to the Pinia store that returns cartCount. Also add a getter named cartItems to the Vuex store that returns state.cartCount.

Vue

import { defineStore } from 'pinia'

export const usePiniaStore = defineStore('main', {
  state: () => ({
    products: ['apple', 'banana'],
    cartCount: 0
  }),
  actions: {
    addToCart() {
      this.cartCount++
    }
  },
  // Your code here to add getter cartItems
})

import { createStore } from 'vuex'

export const store = createStore({
  state() {
    return {
      products: ['apple', 'banana'],
      cartCount: 0
    }
  },
  mutations: {
    incrementCartCount(state) {
      state.cartCount++
    }
  },
  actions: {
    addToCart({ commit }) {
      commit('incrementCartCount')
    }
  },
  // Your code here to add getter cartItems
})

Need a hint?

In Pinia, add cartItems inside getters returning state.cartCount. In Vuex, add a cartItems getter returning state.cartCount.