Using stores in components in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a store in Vue and why do we use it in components?

A store is a centralized place to keep data that many components can share. We use it to keep state organized and make data easy to access and update across components.

beginner

How do you import and use a store inside a Vue component with the Composition API?

You import the store function and call it inside the <code>setup()</code> function. Then you can access state and actions from the store inside your component.

intermediate

What is the benefit of using ref or reactive in a store?

Using ref or reactive makes the store's data reactive, so when the data changes, components using the store update automatically.

beginner

How can you update store state from a component?

You call a function or action defined in the store that changes the state. This keeps state changes organized and predictable.

intermediate

Why is it better to use a store instead of passing props between many components?

Using a store avoids 'prop drilling' where you pass data through many layers. It makes code cleaner and easier to maintain.

In Vue, where do you usually call the store function to use it in a component?

A Inside the <code>setup()</code> function

B Inside the <code>template</code> section

C Inside the <code>style</code> section

D Outside the component file

The store is called inside the setup() function to access its state and actions reactively.

What makes store data reactive in Vue?

A Using <code>setTimeout</code>

B Using <code>console.log</code>

C Using <code>ref</code> or <code>reactive</code>

D Using <code>import</code> statements

Vue's ref and reactive functions make data reactive so components update automatically.

What is a common reason to use a store in Vue components?

A To share state between many components easily

B To style components

C To write CSS faster

D To create HTML templates

Stores help share and manage state across multiple components without passing props.

How do you update the store's state from a component?

A By importing CSS files

B By editing the component's <code>template</code>

C By changing the <code>style</code> section

D By calling an action or function defined in the store

State updates should happen through store actions to keep changes organized.

What problem does using a store help avoid in Vue apps?

A Writing HTML tags incorrectly

B Prop drilling through many components

C Browser compatibility issues

D Slow internet connection

Stores prevent the need to pass props through many layers, making code cleaner.

Explain how to use a store inside a Vue component using the Composition API.

Think about what you do inside the setup() function.

Describe why using a store is helpful compared to passing props between components.

Consider how data flows in your app.

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