What is state in the context of Vue.js?

VueJunior~2 min read

State in the context of Vue.js is data that is stored inside a component or application and can change over time, causing the interface to re-render.

In other words:

State is what determines what the user sees on the screen.
When state changes, the UI changes.

Where is state stored?

In Vue 3, state is most often created using reactive() or ref():

javascript

<script setup>
import { ref } from 'vue'

// this is state
const count = ref(0)
</script>

count is state. When count.value changes, Vue automatically updates the interface.

Example: state in a component

javascript

<template>
  <button @click="count++">
    Count: {{ count }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0) // <- the component's state
</script>

The UI updates every time we change count.

Why does state matter?

Because the UI depends on data.

For example:

whether a modal is open
text entered into a form
which tab is selected
the list of products in a cart
data fetched from an API
the current user

All of this is state.

How does Vue react to state changes?

Vue uses reactivity: it tracks which data is used in the template or in computed values.

When you change state:

javascript

count.value++

Vue:

records the change
figures out which parts of the UI are affected
re-renders only the components that need it

This is what makes the application fast.

Types of state in Vue

1) Local state

Stored in the component.

Example: the state of a modal, an input, a counter.

javascript

const isOpen = ref(false)

2) Global state

Used throughout the whole application.

Stored in:

Pinia
in older projects, Vuex

Example: authentication state, a cart, user settings.

javascript

export const useUserStore = defineStore('user', {
  state: () => ({ user: null })
})

State from props

Sometimes state is passed top-down by the parent:

javascript

<ChildComponent :title="pageTitle" />

Here pageTitle is also the parent's state.

State + UI: a simple example

javascript

<template>
  <input v-model="name" placeholder="Enter your name" />
  <p>Hello, {{ name }}!</p>
</template>

<script setup>
import { ref } from 'vue'

const name = ref('') // state
</script>

We change name -> Vue updates the displayed text.

What is NOT state?

Constants
imported data
computed properties (they depend on state, but don't store state themselves)
props inside the parent (they become state in the child only if handled locally)

Summary (short)

State in Vue is mutable data that the UI depends on. When state changes, Vue automatically updates the interface.

State can be:

local (inside a component),
global (Pinia/Vuex),
passed via props.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.