{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Состояние (state)"},{"type":"text","text":" в контексте Vue.js — это "},{"type":"text","marks":[{"type":"bold"}],"text":"данные"},{"type":"text","text":", которые хранятся внутри компонента или приложения и "},{"type":"text","marks":[{"type":"bold"}],"text":"могут изменяться со временем"},{"type":"text","text":", вызывая "},{"type":"text","marks":[{"type":"bold"}],"text":"перерисовку интерфейса"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проще говоря:"},{"type":"hardBreak"},{"type":"text","text":"👉 "},{"type":"text","marks":[{"type":"bold"}],"text":"State — это то, что влияет на то, что пользователь видит на экране."},{"type":"hardBreak"},{"type":"text","text":"Когда state меняется — меняется UI."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔍 Где хранится состояние?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В Vue 3 состояние чаще всего создаётся с помощью "},{"type":"text","marks":[{"type":"bold"}],"text":"reactive()"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"bold"}],"text":"ref()"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":" — это state."},{"type":"hardBreak"},{"type":"text","text":"Когда "},{"type":"text","marks":[{"type":"code"}],"text":"count.value"},{"type":"text","text":" изменится — Vue автоматически обновит интерфейс."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Пример: состояние в компоненте"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"UI обновится каждый раз, когда мы меняем "},{"type":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧠 Почему состояние важно?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Потому что UI зависит от данных."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"открыт ли модальный окно"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"текст введён в форму"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"какая вкладка выбрана"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"список товаров в корзине"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"данные, полученные с API"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"текущий пользователь"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Всё это — "},{"type":"text","marks":[{"type":"bold"}],"text":"state"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Как Vue реагирует на изменения состояния?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue использует "},{"type":"text","marks":[{"type":"bold"}],"text":"реактивность"},{"type":"text","text":":"},{"type":"hardBreak"},{"type":"text","text":"он отслеживает, какие данные используются в шаблоне или вычислениях."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда ты меняешь state:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"count.value++\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"фиксирует изменение"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"вычисляет, какие части UI затронуты"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"перерисовывает только нужные компоненты"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это делает приложение быстрым."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🗂 Виды состояния во Vue"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"1) "},{"type":"text","marks":[{"type":"bold"}],"text":"Локальное состояние"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Хранится в компоненте."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример: состояние модалки, инпута, счётчика."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const isOpen = ref(false)\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"2) "},{"type":"text","marks":[{"type":"bold"}],"text":"Глобальное состояние"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Используется во всём приложении."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Хранится в:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Pinia"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"старых проектах — Vuex"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример: состояние авторизации, корзина, настройки пользователя."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"export const useUserStore = defineStore('user', {\n state: () => ({ user: null })\n})\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"📦 Состояние из props"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Иногда состояние передаётся сверху вниз родителем:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Здесь "},{"type":"text","marks":[{"type":"code"}],"text":"pageTitle"},{"type":"text","text":" — тоже state родителя."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔁 State + UI: простой пример"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Изменяем "},{"type":"text","marks":[{"type":"code"}],"text":"name"},{"type":"text","text":" → Vue обновляет отображение текста."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Что НЕ является состоянием?"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Константы"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"импортированные данные"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"вычисляемые свойства (они зависят от состояния, но сами state не хранят)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"props внутри родителя (они становятся state в ребёнке только если обрабатываются локально)"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"⚡ Итог (коротко)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Состояние (state) в Vue — это изменяемые данные, от которых зависит UI."},{"type":"hardBreak","marks":[{"type":"bold"}]},{"type":"text","marks":[{"type":"bold"}],"text":"Когда state меняется — Vue автоматически обновляет интерфейс."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"State бывает:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"локальным (внутри компонента),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"глобальным (Pinia/Vuex),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"переданным через props."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что такое состояние (state) в контексте Vue.js?

Комментарии