Using stores in components in Vue - Step-by-Step Execution

Concept Flow - Using stores in components

Import store

↓

Access store state

↓

Use state in template

↓

Trigger store action/mutation

↓

Store updates state

↓

Component re-renders with new state

This flow shows how a Vue component imports a store, reads its state, uses it in the template, triggers actions to update the store, and then re-renders with updated data.

Execution Sample

Vue

import { useCounterStore } from './stores/counter'
const counter = useCounterStore()
console.log(counter.count)
counter.increment()

This code imports a store, accesses its count state, logs it, then calls an increment action to update the count.

Execution Table

Step	Action	Store State Before	Operation	Store State After	Component Update
1	Import store and create instance	count: 0	useCounterStore()	count: 0	No render yet
2	Read count value	count: 0	console.log(counter.count)	count: 0	No change
3	Call increment action	count: 0	counter.increment()	count: 1	Component re-renders with count=1
4	Read updated count	count: 1	console.log(counter.count)	count: 1	No change
5	No further actions	count: 1	End of trace	count: 1	Stable render with count=1

💡 No more actions; store state stable and component shows updated count

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
count	undefined	0	1	1

Key Moments - 2 Insights

Why does the component re-render after calling increment()?

Because the store's state 'count' changes from 0 to 1 at step 3, Vue detects this reactive change and updates the component to show the new count, as seen in the execution_table row 3.

Does reading the count value cause the component to re-render?

No, reading the count (step 2 and 4) does not change state, so no re-render happens. Only state changes trigger re-renders.

Visual Quiz - 3 Questions

Look at the execution table at step 3. What is the value of 'count' after calling increment()?

A 0

B 1

C undefined

D 2

💡 Hint

Check the 'Store State After' column at step 3 in the execution_table.

At which step does the component re-render with the updated count?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Component Update' column in the execution_table.

If we did not call increment(), what would the final count value be?

A 0

B 1

C undefined

D Cannot tell

💡 Hint

Refer to the 'Store State After' column before step 3 in the execution_table.

Concept Snapshot

Using stores in Vue components:
- Import the store with useStore function
- Access reactive state properties
- Use state in template for display
- Call actions/mutations to update state
- Component auto re-renders on state change

Full Transcript

This visual trace shows how a Vue component uses a store. First, the store is imported and an instance is created with useCounterStore. Initially, the count state is 0. Reading the count does not cause any change. When the increment action is called, the store updates count from 0 to 1. Vue detects this reactive change and re-renders the component to show the new count. Subsequent reads show the updated value. This demonstrates the reactive flow of using stores in Vue components.

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