Suggest an edit

Improve this article

Refine the answer for “Local VS Global state”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. Local state (component state)

**Local state** is data that belongs to a **specific component** and is used **only inside it**.

#### Characteristics:

- visible only inside the component
- created through `ref()`, `reactive()`, or `data()`
- each component instance has its own state
- should not be used by other components
- lives as long as the component lives

#### Example of local state

`Counter.vue`:

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

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

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

Here `count` exists only in this component.

---

## 2. Global state (shared state)

**Global state** is data that must be accessible to **many components** or the entire application.

Usually stored in:

- **Pinia** (Vue 3 - the modern standard)
- **Vuex** (legacy)
- or through provide/inject (rarely)

#### Characteristics:

- accessible from any component
- stores important application data
- exists as long as the application runs
- convenient for synchronizing different parts of the UI

#### Example of global state (Pinia)

```javascript
// stores/user.js
import { defineStore } from 'pinia'

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

Usage in a component:

```javascript
<script setup>
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

console.log(userStore.user) // accessible anywhere
</script>
```

---

## Local vs global - the main differences

| Criterion | Local state | Global state |
|---|---|---|
| Where it's stored | Inside the component | In a separate store (Pinia/Vuex) |
| Scope | Component only | The entire application |
| Lifecycle | Lives as long as the component lives | Lives as long as the application runs |
| What it's for | UI logic, temporary data | Authorization, cart, settings |
| Access | Directly in the component | Through the store |
| Reusability | No | Yes (any component can read/change it) |

---

## How do you know where to put state?

### Local state - when:

- a modal is open/closed
- the active tab
- an input's value
- the state of a specific card
- temporary flags (`isLoading`, `isFocused`)

**Example:**
a like button - that's local
a like counter for the whole profile - that's already global.

---

### Global state - when:

- is the user authenticated?
- cart data
- theme settings (light/dark)
- a list of products used across different pages
- an authorization token
- favorites, settings, language

Global state is **the data sources that matter to different parts of the application**.

---

## Summary (briefly)

**Local state - data inside a component.**
**Global state - shared application data, accessible to many components.**

- We create local state through `ref()`/`reactive()`
- We create global state in Pinia/Vuex
- Local state lives with the component
- Global state lives the whole time

Markdown · drag & drop images · ⌘B / ⌘I shortcuts483 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.