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

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

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
})

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
})

Hint

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

Practice

1. Which statement best describes the main difference between Pinia and Vuex in Vue applications?

easy

A. Pinia uses direct state access and simpler actions, while Vuex requires mutations and commits.

B. Vuex is simpler and more modern than Pinia.

C. Pinia cannot be used for shared state management.

D. Vuex does not support modular stores.

Solution

1. Step 1: Understand Pinia's approach

   Pinia allows direct access to state and uses simpler actions without the need for mutations.

2. Step 2: Understand Vuex's approach

   Vuex requires state changes to go through mutations and commits, making it more verbose.

3. Final Answer:

   Pinia uses direct state access and simpler actions, while Vuex requires mutations and commits. -> Option A

4. Quick Check:

   Pinia direct access vs Vuex commits [OK]

Hint: Pinia is simpler with direct state, Vuex uses commits [OK]

Common Mistakes:

• Thinking Vuex is simpler than Pinia
• Believing Pinia can't manage shared state
• Assuming Vuex lacks modularity

2. Which of the following is the correct way to define a Pinia store?

easy

A. const useStore = createPinia({ count: 0 })

B. const store = new Vuex.Store({ state: { count: 0 } })

C. const store = createStore({ state: () => ({ count: 0 }) })

D. const useStore = defineStore('main', { state: () => ({ count: 0 }) })

Solution

1. Step 1: Recall Pinia store syntax

   Pinia stores are defined using defineStore with a unique id and a state function.

2. Step 2: Identify correct syntax

   const useStore = defineStore('main', { state: () => ({ count: 0 }) }) matches Pinia's pattern: defineStore('main', { state: () => ({ count: 0 }) }).

3. Final Answer:

   const useStore = defineStore('main', { state: () => ({ count: 0 }) }) -> Option D

4. Quick Check:

   Pinia store uses defineStore [OK]

Hint: Pinia uses defineStore with state as function [OK]

Common Mistakes:

• Confusing Vuex store creation with Pinia
• Using createPinia incorrectly
• Defining state as object instead of function

3. Given this Pinia store code, what will be the output of console.log(store.count) after calling store.increment() once?

const useStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})
const store = useStore()
store.increment()

medium

A. 0

B. undefined

C. 1

D. Error: increment is not a function

Solution

1. Step 1: Understand initial state

   The store's count starts at 0 as defined in state.

2. Step 2: Analyze increment action

   The increment method increases count by 1 using this.count++.

3. Step 3: Check the output after calling increment

   After calling store.increment(), count becomes 1.

4. Final Answer:

   1 -> Option C

5. Quick Check:

   Increment increases count to 1 [OK]

Hint: Actions modify state directly in Pinia [OK]

Common Mistakes:

• Expecting count to remain 0
• Confusing actions with mutations
• Assuming increment is undefined

4. Identify the error in this Vuex store mutation and how to fix it:

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})
store.increment()

medium

A. Mutations must be called with commit, so use store.commit('increment') instead of store.increment()

B. State should be a function returning an object, not an object directly

C. Mutations cannot modify state directly, use actions instead

D. The mutation name must be uppercase

Solution

1. Step 1: Check how mutations are called in Vuex

   Vuex mutations must be triggered using store.commit('mutationName'), not by calling the mutation function directly.

2. Step 2: Identify the fix

   Replace store.increment() with store.commit('increment') to correctly invoke the mutation.

3. Final Answer:

   Mutations must be called with commit, so use store.commit('increment') instead of store.increment() -> Option A

4. Quick Check:

   Vuex mutations require commit() [OK]

Hint: Use commit() to call Vuex mutations [OK]

Common Mistakes:

• Calling mutation functions directly
• Thinking state must be a function in Vuex root store
• Believing mutations can't modify state

5. You want to migrate a Vuex store to Pinia. Which of these changes is necessary to adapt the Vuex mutation increment(state) { state.count++ } into Pinia's style?

hard

A. Keep the mutation as is and call it with store.commit('increment') in Pinia.

B. Convert the mutation into an action method that directly modifies state using this.count++.

C. Remove the mutation and update state only via getters.

D. Use store.dispatch('increment') to call the mutation in Pinia.

Solution

1. Step 1: Understand Vuex mutation role

   Vuex mutations modify state and are called via commits.

2. Step 2: Understand Pinia's approach

   Pinia does not use mutations; instead, actions directly modify state using this.

3. Step 3: Adapt mutation to Pinia action

   Convert the mutation into an action method that increments this.count directly.

4. Final Answer:

   Convert the mutation into an action method that directly modifies state using this.count++. -> Option B

5. Quick Check:

   Pinia uses actions, no mutations [OK]

Hint: Pinia replaces mutations with direct state changes in actions [OK]

Common Mistakes:

• Trying to use commit() in Pinia
• Using getters to update state
• Calling dispatch() for mutations in Pinia