Defining state in stores in Vue - Mini Project: Build & Apply

Defining State in Stores with Vue

📖 Scenario: You are building a simple Vue app that tracks a user's profile information. To keep the data organized and reactive, you will define the state inside a Vue store.

🎯 Goal: Create a Vue store that holds the user's name and age as state variables.

📋 What You'll Learn

Create a store file using the Composition API with reactive

Define a state object with name and age properties

Export the store for use in Vue components

💡 Why This Matters

🌍 Real World

Vue stores help manage shared state in applications, making data reactive and easy to access across components.

💼 Career

Understanding how to define and export state in Vue stores is essential for frontend developers working with Vue.js to build scalable and maintainable apps.

1

Create the initial state object

Create a variable called state using Vue's reactive function. It should be an object with name set to "Alice" and age set to 30.

Vue

import { reactive } from 'vue'

// Create the reactive state object with name and age
# Your code here

Hint

Use reactive from Vue to create an object with the exact keys and values.

2

Add a getter for the user's greeting

Add a new getter called greeting inside the store. It should return a string like `Hello, ${state.name}!` using a function.

Vue

import { reactive } from 'vue'

const state = reactive({
  name: "Alice",
  age: 30
})

// Add a greeting getter that returns 'Hello, Alice!'
# Your code here

Hint

Use an arrow function that returns a template string using state.name.

3

Create the store export object

Create a constant called useUserStore that returns an object with state and greeting properties.

Vue

import { reactive } from 'vue'

const state = reactive({
  name: "Alice",
  age: 30
})

const greeting = () => `Hello, ${state.name}!`

// Create useUserStore that returns { state, greeting }
# Your code here

Hint

Return an object with the keys state and greeting inside the arrow function.

4

Export the store for use in components

Add an export statement to export the useUserStore constant as the default export.

Vue

import { reactive } from 'vue'

const state = reactive({
  name: "Alice",
  age: 30
})

const greeting = () => `Hello, ${state.name}!`

const useUserStore = () => ({
  state,
  greeting
})

// Export useUserStore as default
# Your code here

Hint

Use export default useUserStore to make the store available to other files.

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