Pinia vs Vuex comparison - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Pinia store with a state property 'count' initialized to 0.

Vue

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: [1]
  })
});

Drag options to blanks, or click blank then click option'

A0

Bnull

Cundefined

D''

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined instead of 0 for count.

The state property 'count' should start at 0 to represent a numeric counter.

2fill in blank

medium

Complete the code to commit a mutation in Vuex that increments 'count' by 1.

Vue

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count [1] 1;
    }
  }
});

Drag options to blanks, or click blank then click option'

A+=

B-=

C*=

D/=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' decreases the count instead of increasing it.

To increase the count by 1, use the '+=' operator.

3fill in blank

hard

Fix the error in the Pinia action that tries to update the state directly without using 'this'.

Vue

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      [1].count++;
    }
  }
});

Drag options to blanks, or click blank then click option'

Astate

Bthis

Cstore

Dcounter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'state' instead of 'this' inside actions.

In Pinia actions, use 'this' to access and modify the store's state.

4fill in blank

hard

Fill both blanks to define a Vuex getter that returns double the count.

Vue

const store = new Vuex.Store({
  state: { count: 0 },
  getters: {
    doubleCount: (state) => state.[1] [2] 2
  }
});

Drag options to blanks, or click blank then click option'

Acount

B*

C+

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' instead of '*' changes the meaning.

The getter accesses 'count' and multiplies it by 2 using '*'.

5fill in blank

hard

Fill all three blanks to create a Pinia store with a getter that returns count squared.

Vue

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    squaredCount: (state) => state.[1] [2] [3]
  }
});

Drag options to blanks, or click blank then click option'

Acount

B**

C2

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' instead of '**' changes the operation.

The getter returns 'count' raised to the power of 2 using the '**' operator.