Pinia vs Vuex comparison - Visual Side-by-Side Comparison

Concept Flow - Pinia vs Vuex comparison

Start: Choose State Management

↓

Vuex: Setup Store

↓

Pinia: Setup Store

↓

Use Store in Components

↓

State Update & Reactivity

↓

Compare Features & Syntax

↓

Decide Based on Needs

This flow shows choosing between Vuex and Pinia, setting up each store, using them in components, updating state, and comparing features to decide.

Execution Sample

Vue

import { createStore } from 'vuex';
const store = createStore({ state: () => ({ count: 0 }), mutations: { increment(state) { state.count++ } } });

import { defineStore } from 'pinia';
const useCounter = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } });

Shows basic store setup in Vuex and Pinia with a count state and increment method.

Execution Table

Step	Action	Vuex State	Pinia State	Notes
1	Initialize Vuex store	count: 0	N/A	Vuex store created with count 0
2	Initialize Pinia store	N/A	count: 0	Pinia store created with count 0
3	Call Vuex increment mutation	count: 1	count: 0	Vuex count increments by 1
4	Call Pinia increment action	count: 1	count: 1	Pinia count increments by 1
5	Access Vuex state in component	count: 1	count: 1	Both stores provide reactive state
6	Access Pinia state in component	count: 1	count: 1	Pinia uses direct property access
7	Compare syntax simplicity	More boilerplate	Simpler, less code	Pinia is more concise
8	Compare devtools support	Good	Better with Vue 3	Pinia integrates well with Vue 3 devtools
9	Exit	N/A	N/A	Comparison complete

💡 All steps done, stores initialized, incremented, and compared

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
Vuex count	0	1	1	1
Pinia count	0	0	1	1

Key Moments - 2 Insights

Why does Vuex require mutations but Pinia uses actions directly?

Vuex enforces mutations for state changes to track them clearly (see Step 3), while Pinia allows direct state changes inside actions for simpler code (see Step 4).

How does reactivity differ between Vuex and Pinia?

Both provide reactive state accessible in components (Steps 5 and 6), but Pinia uses Vue 3's reactivity system more naturally, making it simpler to use.

Visual Quiz - 3 Questions

Look at the execution table, what is the Vuex count after Step 3?

A 0

B 2

C 1

D Undefined

💡 Hint

Check the 'Vuex State' column at Step 3 in the execution_table.

At which step does Pinia's count first increment?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Pinia State' column changes in the execution_table.

If Vuex allowed direct state changes like Pinia, which step would change?

A Step 4

B Step 3

C Step 5

D Step 6

💡 Hint

Consider where Vuex currently uses mutations (Step 3) and how Pinia uses actions.

Concept Snapshot

Pinia vs Vuex Comparison:
- Vuex uses mutations to change state; Pinia uses actions directly.
- Pinia has simpler syntax and better Vue 3 integration.
- Both provide reactive state accessible in components.
- Pinia reduces boilerplate and improves developer experience.
- Choose Vuex for legacy projects; Pinia for new Vue 3 apps.

Full Transcript

This visual execution compares Pinia and Vuex state management in Vue. It starts by initializing both stores with a count state at zero. Vuex requires mutations to update state, shown by incrementing count in Step 3. Pinia uses actions directly to increment count in Step 4. Both states become reactive and accessible in components by Steps 5 and 6. The comparison highlights that Pinia has simpler syntax and better integration with Vue 3, reducing boilerplate code. Key moments clarify why Vuex uses mutations and how reactivity works in both. The quiz tests understanding of state changes and differences in update methods. Overall, Pinia is recommended for new Vue 3 projects, while Vuex suits older setups.

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