Defining state in stores in Vue - Performance & Optimization

Performance: Defining state in stores

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how state changes trigger component updates and re-renders.

Managing application state in a Vue store

Vue

import { ref } from 'vue';

export function useStore() {
  const user = ref(null);
  const items = ref([]);

  function updateUser(newUser) {
    user.value = newUser;
  }

  function addItem(item) {
    items.value.push(item);
  }

  return { user, items, updateUser, addItem };
}

Splitting state into smaller refs allows Vue to track dependencies precisely, so only components using changed state re-render.

📈 Performance Gainreduces re-renders to only affected components, improving interaction responsiveness

Managing application state in a Vue store

Vue

import { reactive } from 'vue';

export const store = reactive({
  user: null,
  items: [],
  updateUser(newUser) {
    this.user = newUser;
  },
  addItem(item) {
    this.items.push(item);
  }
});

Using a large reactive object for the entire store causes all components using any part of the store to re-render on any state change, even if unrelated.

📉 Performance Costtriggers many unnecessary re-renders and reactive tracking overhead

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large reactive store object	High (many components re-render)	High (many reflows triggered)	High (many paints)	[X] Bad
Small reactive refs per state piece	Low (only affected components re-render)	Low (minimal reflows)	Low (minimal paints)	[OK] Good

Rendering Pipeline

When state in the store changes, Vue's reactivity system tracks dependencies and triggers component updates. Efficient state definition minimizes the number of components that need to update.

→Dependency Tracking

→Component Update

→Render

⚠️ BottleneckComponent Update stage due to unnecessary re-renders

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling how state changes trigger component updates and re-renders.

Optimization Tips

1Split store state into small reactive refs or computed properties.

2Avoid using one large reactive object for all state.

3Only update state pieces that actually change to minimize re-renders.

Performance Quiz - 3 Questions

What is a performance benefit of defining state as small reactive refs in a Vue store?

A State updates block rendering longer

B Only components using changed state re-render

C All components re-render faster

D It increases bundle size significantly

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for excessive component updates and long scripting times.

What to look for: Check if many components update on unrelated state changes, indicating inefficient state definition.

Practice

1. What is the correct way to define the state in a Vue store using defineStore?

easy

A. Define state as an array of values.

B. Define state as a plain object directly.

C. Define state as a function that returns an object.

D. Define state as a string representing JSON.

Solution

1. Step 1: Understand Vue store state definition

   Vue stores require state to be a function returning an object to avoid shared state across instances.

2. Step 2: Compare options with Vue pattern

   Only defining state as a function returning an object matches Vue's recommended pattern.

3. Final Answer:

   Define state as a function that returns an object. -> Option C

4. Quick Check:

   State = function returning object [OK]

Hint: State must be a function returning an object in Vue stores [OK]

Common Mistakes:

• Defining state as a plain object causes shared state bugs
• Using arrays or strings instead of objects for state
• Forgetting to return the object from the state function

2. Which of the following is the correct syntax to define a store named 'user' with a state containing a 'name' property initialized to an empty string?

easy

A. const useUserStore = defineStore({ id: 'user', state: () => ({ name: '' }) })

B. const useUserStore = defineStore('user', { state: { name: '' } })

C. const useUserStore = defineStore('user', () => ({ name: '' }))

D. const useUserStore = defineStore('user', { state: () => ({ name: '' }) })

Solution

1. Step 1: Recall defineStore syntax

   The first argument is the store id string, the second is an object with a state function returning the state object.

2. Step 2: Check each option

   const useUserStore = defineStore('user', { state: () => ({ name: '' }) }) correctly uses defineStore with id 'user' and state as a function returning { name: '' }.

3. Final Answer:

   const useUserStore = defineStore('user', { state: () => ({ name: '' }) }) -> Option D

4. Quick Check:

   defineStore(id, { state: () => ({}) }) [OK]

Hint: Use defineStore('id', { state: () => ({}) }) syntax [OK]

Common Mistakes:

• Defining state as an object instead of a function
• Passing state function as the second argument directly
• Using an object with 'id' property instead of string id

3. Given the following store definition, what will be the initial value of store.count after calling const store = useCounterStore()?

const useCounterStore = defineStore('counter', {
  state: () => ({ count: 10 })
})

medium

A. 10

B. 0

C. null

D. undefined

Solution

1. Step 1: Analyze the state function

   The state function returns an object with count initialized to 10.

2. Step 2: Understand store instance value

   When useCounterStore() is called, it creates a store instance with count set to 10 as initial state.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Initial count = 10 [OK]

Hint: State function returns initial values used in store instance [OK]

Common Mistakes:

• Assuming count defaults to 0 if not explicitly set
• Confusing state function with plain object
• Expecting undefined because of missing initialization

4. Identify the error in this store definition:

const useTodoStore = defineStore('todo', {
  state: {
    todos: []
  }
})

medium

A. The todos array should be initialized outside the state.

B. State must be a function returning an object, not an object directly.

C. The store id 'todo' must be an object, not a string.

D. The defineStore function requires no arguments.

Solution

1. Step 1: Check state definition format

   State must be a function returning an object to avoid shared state across instances.

2. Step 2: Identify the error

   The code defines state as an object directly, which is incorrect.

3. Final Answer:

   State must be a function returning an object, not an object directly. -> Option B

4. Quick Check:

   State = function returning object, not plain object [OK]

Hint: State must always be a function returning an object [OK]

Common Mistakes:

• Defining state as a plain object causes shared state bugs
• Misunderstanding store id type requirements
• Incorrect usage of defineStore arguments

5. You want to create a store that holds a list of users and a method to add a new user. Which is the correct way to define the state and actions in defineStore?

hard

A. defineStore('users', { state: () => ({ users: [] }), actions: { addUser(user) { this.users.push(user) } } })

B. defineStore('users', { state: { users: [] }, methods: { addUser(user) { this.users.push(user) } } })

C. defineStore('users', () => ({ users: [], addUser(user) { this.users.push(user) } }))

D. defineStore('users', { state: () => ({ users: [] }), addUser(user) { this.users.push(user) } })

Solution

1. Step 1: Define state as a function returning an object

   The state must be a function returning an object with users array.

2. Step 2: Define actions inside the actions property

   Actions are methods inside the actions object to modify state safely.

3. Step 3: Verify correct syntax

   defineStore('users', { state: () => ({ users: [] }), actions: { addUser(user) { this.users.push(user) } } }) correctly defines state as a function and actions as an object with addUser method.

4. Final Answer:

   defineStore('users', { state: () => ({ users: [] }), actions: { addUser(user) { this.users.push(user) } } }) -> Option A

5. Quick Check:

   State function + actions object = correct store [OK]

Hint: Put actions inside 'actions' object, state as function [OK]

Common Mistakes:

• Defining state as an object instead of a function
• Placing methods outside the actions property
• Using 'methods' instead of 'actions' in defineStore