Defining state in stores in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of defining state in a Vue store?

State in a Vue store holds the shared data that multiple components can access and react to. It acts like a single source of truth for your app's data.

beginner

How do you define reactive state in a Vue 3 store using the Composition API?

You use the reactive or ref functions from Vue to create reactive state objects or values inside the store.

beginner

Why should state in stores be reactive?

Reactive state automatically updates the UI when the data changes, so your app stays in sync without manual DOM updates.

intermediate

What is a simple example of defining state in a Pinia store?

Inside defineStore, you return an object with state properties inside a function, for example:

state: () => ({ count: 0 })

beginner

Can you directly mutate state properties in a Vue store? Why or why not?

Yes, you can directly change state properties because Vue tracks these changes reactively. This makes updating data simple and automatic in the UI.

Which Vue function is commonly used to create reactive state in a store?

A reactive

B computed

C watch

D provide

The reactive function creates a reactive object that Vue tracks for changes.

In Pinia, how do you define the initial state inside a store?

A state: () => ({})

B state = {}

C data() { return {} }

D setup() { return {} }

Pinia expects a state property that is a function returning the initial state object.

Why is it important that store state is reactive?

A So UI updates automatically when state changes

B To prevent any changes to the data

C To make the app load faster

D To avoid using components

Reactivity ensures the UI stays in sync with the data without manual updates.

Which of these is NOT a way to define state in Vue 3 stores?

A Using reactive()

B Using ref()

C Using computed()

D Returning an object from state()

computed() creates derived state, not the main reactive state itself.

What happens if you mutate a reactive state property in a Vue store?

A The UI updates automatically

B The app crashes

C Nothing changes

D The state becomes non-reactive

Vue tracks reactive state changes and updates the UI accordingly.

Explain how to define and use state in a Vue 3 store with Pinia.

Think about how you create the store and how components read the state.

Why is reactive state important in Vue stores and how does it affect your app's UI?

Consider what happens when data changes and how the UI responds.

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