Type-safe stores with Pinia in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Pinia's store creation function.

Vue

import { [1] } from 'pinia';

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

AdefineStore

BcreateStore

CuseStore

DmakeStore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'createStore' which is from Vuex, not Pinia.

Using 'useStore' which is a hook, not the store creator.

The defineStore function is used to create a Pinia store.

2fill in blank

medium

Complete the code to define a Pinia store named 'counter'.

Vue

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

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

AcreateStore

BuseStore

CdefineStore

DmakeStore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'createStore' which is not from Pinia.

Forgetting to name the store.

defineStore is used to create a named store in Pinia.

3fill in blank

hard

Fix the error in the state typing to make the store type-safe.

Vue

export const useUserStore = defineStore('user', {
  state: (): [1] => ({ name: '', age: 0 })
});

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

AUserState

Bany

Cunknown

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'any' which disables type checking.

Using 'object' which is too generic.

Using a specific interface like UserState ensures type safety for the state.

4fill in blank

hard

Fill both blanks to add a typed getter and an action in the Pinia store.

Vue

export const useTodoStore = defineStore('todo', {
  state: () => ({ todos: [] as string[] }),
  getters: {
    todoCount: (state) => state.[1].length
  },
  actions: {
    addTodo(todo: string) {
      this.[2].push(todo);
    }
  }
});

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

Atodos

Btasks

Citems

Dlist

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the same state property.

Using undefined properties in getters or actions.

The state property is named todos, so both getter and action must use it.

5fill in blank

hard

Fill all three blanks to create a fully typed Pinia store with state, getter, and action.

Vue

interface ProductState {
  products: string[];
}

export const useProductStore = defineStore('product', {
  state: (): [1] => ({ products: [] }),
  getters: {
    productCount: (state) => state.[2].length
  },
  actions: {
    addProduct(product: string) {
      this.[3].push(product);
    }
  }
});

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

AProductState

Bproducts

DProductList

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong interface name for state typing.

Mismatching property names in getter or action.

The state is typed as ProductState, and the property is products used in getter and action.