Pinia vs Vuex comparison - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Key difference in store setup between Pinia and Vuex

Which statement correctly describes how you create a store in Pinia compared to Vuex?

A Pinia requires manual mutation definitions, Vuex automatically infers mutations.

B Vuex stores are created with functions, Pinia uses plain objects only.

C Both Pinia and Vuex require class-based stores to manage state.

D Pinia uses a function to define stores, while Vuex uses an object with mutations and actions.

💡 Hint

Think about how you define state and actions in each library.

Pinia uses a function called defineStore to create stores, which returns reactive state and actions. Vuex uses an object with separate mutations and actions properties.

❓ component_behavior

intermediate

State reactivity difference in Pinia vs Vuex

What happens when you update a state property in Pinia compared to Vuex in a Vue component?

A Pinia state updates are reactive and reflected immediately; Vuex requires committing mutations to update state reactively.

B Neither Pinia nor Vuex support reactive state updates in Vue components.

C Vuex state updates automatically trigger reactivity; Pinia requires explicit mutation commits.

D Both Pinia and Vuex require manual DOM updates after state changes.

💡 Hint

Consider how each library handles state changes and reactivity.

Pinia allows direct state modification and Vue tracks changes reactively. Vuex requires committing mutations to update state reactively.

📝 Syntax

advanced

Correct syntax for defining a Pinia store

Which code snippet correctly defines a Pinia store with a state property 'count' initialized to 0 and an action 'increment' that increases count by 1?

A

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

B

import { createStore } from 'pinia';
export const useCounterStore = createStore({
  count: 0,
  increment() {
    this.count++;
  }
});

C

import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', () => {
  const count = 0;
  function increment() {
    count++;
  }
  return { count, increment };
});

D

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

💡 Hint

Check the correct function and object structure for Pinia stores.

Option A uses defineStore with an id string and an object containing state as a function returning an object, and actions as methods. This matches Pinia's syntax.

🔧 Debug

advanced

Identify the error in Vuex mutation usage

Given this Vuex mutation code, what error will occur when committing 'increment' mutation? const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count += 1 } } }); store.commit('increment'); console.log(store.state.count);

A TypeError because 'state' is undefined in mutation.

B No error; output will be 1.

C SyntaxError due to missing semicolon in mutation.

D Runtime error because mutations cannot modify state directly.

💡 Hint

Check how Vuex mutations receive state and how commit works.

The mutation function receives the state as first argument and can modify it directly. Committing 'increment' increases count by 1. No error occurs.

❓ state_output

expert

Pinia store state after multiple actions

Consider this Pinia store and usage: import { defineStore } from 'pinia'; export const useStore = defineStore('main', { state: () => ({ value: 10 }), actions: { add(n) { this.value += n; }, reset() { this.value = 0; } } }); const store = useStore(); store.add(5); store.add(-3); store.reset(); store.add(7); What is the final value of store.value?

A 0

B 19

C 7

D 15

💡 Hint

Follow each action step by step and update the value.

Starting at 10, add(5) makes 15, add(-3) makes 12, reset() sets to 0, add(7) makes 7.

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