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.