UseState в Nuxt.js является глобальным или работает в рамках одной страницы

UseState в Nuxt.js - глобальный или локальный контекст?

Важное уточнение

Этот вопрос содержит путаницу в технологиях:

• useState - это хук из React
• Nuxt.js - это фреймворк для Vue.js

Ниже я разберу оба варианта:

Вариант 1: useState в React

Если вы используете React, то useState работает в рамках одного компонента и не является глобальным.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  // count и setCount существуют только для этого компонента

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <>
      <Counter /> {/* Count: 0 */}
      <Counter /> {/* Count: 0 - независимое состояние */}
    </>
  );
}

Каждый экземпляр компонента Counter имеет собственное независимое состояние.

Сделать состояние глобальным в React

Чтобы поделиться состоянием между компонентами, используй:

1. Context API

const CountContext = React.createContext();

function CountProvider({ children }) {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(CountContext);
  // Теперь count глобален для всех компонентов

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <CountProvider>
      <Counter /> {/* Count: 0 */}
      <Counter /> {/* Count: 0 - одно состояние! */}
    </CountProvider>
  );
}

2. State Management библиотеки (Redux, Zustand, Recoil)

import { useRecoilState } from 'recoil';

const countAtom = atom({
  key: 'count',
  default: 0
});

function Counter() {
  const [count, setCount] = useRecoilState(countAtom);
  // count синхронизирован глобально

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3. Поднятие состояния (Lifting State Up)

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Counter count={count} setCount={setCount} />
      <Counter count={count} setCount={setCount} />
    </>
  );
}

function Counter({ count, setCount }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Вариант 2: Состояние в Nuxt.js (Vue.js)

В Nuxt.js используется Vue, а не React, поэтому используется ref или reactive вместо useState.

Для локального состояния компонента:

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

const count = ref(0); // Локальное состояние
</script>

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

Для глобального состояния в Nuxt.js используй Pinia (рекомендуемый вариант) или Vuex:

Pinia (современный подход)

// stores/counter.js
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  return { count, increment };
});

// Использование в компоненте
<script setup>
import { useCounterStore } from '~/stores/counter';

const store = useCounterStore();
</script>

<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <button @click="store.increment()">Increment</button>
  </div>
</template>

Сравнение: Локальное vs Глобальное состояние

Поведение состояния при навигации

React Router

function ProductPage() {
  const [product, setProduct] = useState(null);
  const { id } = useParams();

  useEffect(() => {
    // При изменении id загружаем новый продукт
    loadProduct(id).then(setProduct);
  }, [id]);

  // Состояние будет пересоздано при переходе на другую страницу
}

Nuxt

<script setup>
import { ref, watch } from 'vue';
const route = useRoute();
const product = ref(null);

watch(() => route.params.id, async (id) => {
  product.value = await loadProduct(id);
});
</script>

Лучшие практики

1. Используй локальное состояние по умолчанию

Состояние должно быть локальным, если оно нужно только для одного компонента:

// React
function Modal() {
  const [isOpen, setIsOpen] = useState(false);
  // isOpen локально, не нужно делать его глобальным
}

2. Делай состояние глобальным только когда необходимо

Если множество компонентов нуждаются в одном состоянии, поднимай его на уровень выше:

// React
function App() {
  const [user, setUser] = useState(null);
  // user доступен всем дочерним компонентам
  return <Header user={user} /> <Main user={user} />;
}

3. Используй стейт-менеджеры для сложного глобального состояния

// Если логика сложная, используй Redux/Zustand/Pinia
const userSlice = createSlice({
  name: 'user',
  initialState: { user: null },
  reducers: {
    setUser: (state, action) => { state.user = action.payload; }
  }
});

Заключение

useState в React работает локально - каждый экземпляр компонента имеет собственное состояние. Чтобы сделать состояние глобальным, нужно использовать Context API, Redux, Zustand или другие state management библиотеки.

В Nuxt.js используется Pinia для управления глобальным состоянием. При переходе между страницами локальное состояние пересоздается, а глобальное сохраняется.