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

Need a 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

Need a 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

Need a 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

Need a hint?

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