Using stores in components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue component display?

Given the following Vue 3 component using Pinia store, what will be rendered inside the <div>?

Vue

import { defineComponent } from 'vue';
import { useCounterStore } from '@/stores/counter';

export default defineComponent({
  setup() {
    const counter = useCounterStore();
    return { counter };
  },
  template: `<div>{{ counter.count }}</div>`
});

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

A 5

B 0

C undefined

D Error: counter is not defined

💡 Hint

Look at the initial state of the store's count property.

The Pinia store useCounterStore initializes count to 5. The component accesses counter.count and displays it, so the output is 5.

❓ state_output

intermediate

What is the value of message after clicking the button?

Consider this Vue 3 component using a Pinia store. What will be the value of message after the button is clicked once?

Vue

import { defineComponent, ref } from 'vue';
import { useMessageStore } from '@/stores/message';

export default defineComponent({
  setup() {
    const store = useMessageStore();
    const message = ref(store.text);
    function update() {
      store.updateText('Hello Vue!');
      message.value = store.text;
    }
    return { message, update };
  },
  template: `<div><p>{{ message }}</p><button @click="update">Update</button></div>`
});

// Pinia store definition:
// import { defineStore } from 'pinia';
// export const useMessageStore = defineStore('message', {
//   state: () => ({ text: 'Initial' }),
//   actions: {
//     updateText(newText) { this.text = newText; }
//   }
// });

A Error: message is not reactive

B Hello Vue!

C undefined

D Initial

💡 Hint

Think about how message is assigned and updated.

The message ref is initialized with the store's text value but does not reactively track store changes. Updating the store's text does not update message automatically. So after clicking, message remains 'Initial'.

📝 Syntax

advanced

Which option correctly imports and uses a Pinia store in a Vue 3 component?

Identify the correct way to import and use a Pinia store named useTodoStore inside a Vue 3 component's setup function.

A

import { useTodoStore } from '@/stores/todo';

export default {
  setup() {
    const todoStore = useTodoStore;
    return { todoStore };
  }
};

B

import useTodoStore from '@/stores/todo';

export default {
  setup() {
    const todoStore = useTodoStore();
    return { todoStore };
  }
};

C

import { useTodoStore } from '@/stores/todo';

export default {
  setup() {
    const todoStore = useTodoStore();
    return { todoStore };
  }
};

D

import { useTodoStore } from '@/stores/todo';

export default {
  setup() {
    const todoStore = useTodoStore();
  }
};

💡 Hint

Remember how to import named exports and call functions inside setup.

Option C correctly imports the named export useTodoStore and calls it inside setup. Option C imports as default which is incorrect. Option C assigns the function itself without calling it. Option C does not return the store, so it won't be accessible in the template.

🔧 Debug

advanced

Why does this Vue component fail to update the store state reactively?

Examine the code below. The component tries to update the Pinia store's count when the button is clicked, but the displayed count does not change. What is the cause?

Vue

import { defineComponent } from 'vue';
import { useCounterStore } from '@/stores/counter';

export default defineComponent({
  setup() {
    const counter = useCounterStore();
    function increment() {
      counter.count += 1;
    }
    return { counter, increment };
  },
  template: `<div><p>{{ counter.count }}</p><button @click="increment">Add</button></div>`
});

// Pinia store:
// export const useCounterStore = defineStore('counter', {
//   state: () => ({ count: 0 }),
//   actions: {
//     increment() { this.count++; }
//   }
// });

A Directly modifying <code>counter.count</code> bypasses Pinia's reactivity; must use store action.

B The store is not properly imported, causing reactivity to fail.

C The template syntax is incorrect; must use <code>v-text</code> instead of interpolation.

D The <code>increment</code> function is not returned from <code>setup</code>.

💡 Hint

Consider how Pinia tracks changes and the recommended way to update state.

Pinia recommends updating state via actions to ensure reactivity and proper tracking. Directly modifying counter.count may not trigger updates in some setups. Using the store's increment action ensures reactive updates.

🧠 Conceptual

expert

What is the main benefit of using Pinia stores in Vue components?

Choose the best explanation for why developers use Pinia stores in Vue 3 applications.

A Pinia replaces Vue Router to handle navigation between pages.

B Pinia centralizes state management, making state reactive and shared across components easily.

C Pinia automatically generates UI components based on state definitions.

D Pinia compiles Vue templates into optimized JavaScript functions.

💡 Hint

Think about what state management means in an app.

Pinia is a state management library that centralizes and shares reactive state across Vue components. It does not generate UI, handle routing, or compile templates.

Practice

1. What is the main purpose of using a store in a Vue component?

easy

A. To share and manage state across multiple components easily

B. To style components with CSS variables

C. To handle component lifecycle hooks

D. To define routes for navigation

Solution

1. Step 1: Understand what a store does

   A store holds shared data that multiple components can access and update.

2. Step 2: Identify the purpose in Vue components

   Stores help components share and manage state without passing props or events repeatedly.

3. Final Answer:

   To share and manage state across multiple components easily -> Option A

4. Quick Check:

   Store = Shared state management [OK]

Hint: Stores share data between components without props [OK]

Common Mistakes:

• Confusing stores with styling or routing
• Thinking stores handle lifecycle hooks
• Assuming stores are only for single components

2. Which is the correct way to import and use a Pinia store inside a Vue component's setup() function?

easy

A. import store from 'pinia'

B. const store = createStore()

C. const store = useStore()

D. const store = new Store()

Solution

1. Step 1: Recall Pinia store usage

   Pinia stores are accessed inside components by calling the store function, usually named useStore().

2. Step 2: Check the options

   Only const store = useStore() correctly calls the store function inside setup().

3. Final Answer:

   const store = useStore() -> Option C

4. Quick Check:

   Use useStore() to access store [OK]

Hint: Call useStore() inside setup() to get the store [OK]

Common Mistakes:

• Trying to import store directly from 'pinia'
• Using createStore() which is Vuex syntax
• Using new Store() which is not valid in Pinia

3. Given this Pinia store code:

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

And this component code:

const counter = useCounterStore()
counter.increment()
console.log(counter.count)

What will be logged to the console?

medium

A. NaN

B. 0

C. undefined

D. 1

Solution

1. Step 1: Understand the store state and action

   The store starts with count = 0. Calling increment() increases count by 1.

2. Step 2: Trace the component code

   After calling counter.increment(), counter.count becomes 1, so logging it prints 1.

3. Final Answer:

   1 -> Option D

4. Quick Check:

   Increment changes count from 0 to 1 [OK]

Hint: increment() adds 1 to count, so output is 1 [OK]

Common Mistakes:

• Expecting count to stay 0 without calling increment
• Confusing state with undefined
• Thinking increment returns a value

4. What is wrong with this Vue component code using a Pinia store?

import { useCounterStore } from '@/stores/counter'
export default {
  setup() {
    const counter = useCounterStore
    counter.increment()
    return { counter }
  }
}

medium

A. useCounterStore is not called as a function

B. increment() is not a valid action

C. counter should be imported from 'pinia' instead

D. setup() should return a function

Solution

1. Step 1: Check how the store is used

   The code assigns counter = useCounterStore without parentheses, so it stores the function itself, not the store instance.

2. Step 2: Understand the effect

   Calling counter.increment() fails because counter is a function, not the store object.

3. Final Answer:

   useCounterStore is not called as a function -> Option A

4. Quick Check:

   Call useCounterStore() to get store instance [OK]

Hint: Always call useCounterStore() with () [OK]

Common Mistakes:

• Forgetting parentheses when calling store function
• Assuming increment() is invalid
• Confusing import source for store

5. You want to create a Vue component that uses a Pinia store to track a list of tasks. You need to add a new task only if it is not empty and not already in the list. Which code snippet correctly uses the store inside setup() to achieve this?

hard

A. const taskStore = useTaskStore
function addTask(task) {
if (taskStore.tasks.indexOf(task) === -1) {
taskStore.tasks.push(task)
}
}

B. const taskStore = useTaskStore()
function addTask(task) {
if (task && !taskStore.tasks.includes(task)) {
taskStore.tasks.push(task)
}
}

C. const taskStore = useTaskStore()
function addTask(task) {
if (task !== '') {
taskStore.tasks = [...taskStore.tasks, task]
}
}

D. const taskStore = useTaskStore()
function addTask(task) {
taskStore.tasks.push(task)
}

Solution

1. Step 1: Check store usage and function call

   const taskStore = useTaskStore()
   function addTask(task) {
     if (task && !taskStore.tasks.includes(task)) {
       taskStore.tasks.push(task)
     }
   

   correctly calls useTaskStore() to get the store instance and defines addTask with proper checks.

2. Step 2: Verify conditions for adding task

   It checks if task is not empty and not already in taskStore.tasks before pushing, preventing duplicates and empty entries.

3. Final Answer:

   correctly uses the store and conditions to add tasks safely -> Option B

4. Quick Check:

   Call store with () and check conditions before push [OK]

Hint: Call store with () and check duplicates before push [OK]

Common Mistakes:

• Not calling useTaskStore() as a function
• Not checking for empty or duplicate tasks
• Replacing tasks array instead of pushing