{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 "},{"type":"text","marks":[{"type":"bold"}],"text":"Состояние в Composition API — это реактивные переменные ("},{"type":"text","marks":[{"type":"code"}],"text":"ref"},{"type":"text","marks":[{"type":"bold"}],"text":", "},{"type":"text","marks":[{"type":"code"}],"text":"reactive"},{"type":"text","marks":[{"type":"bold"}],"text":"), объявленные внутри "},{"type":"text","marks":[{"type":"code"}],"text":"setup()"},{"type":"text","marks":[{"type":"bold"}],"text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Основные способы хранения состояния в Composition API"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ 1. "},{"type":"text","marks":[{"type":"code"}],"text":"ref()"},{"type":"text","text":" — для примитивов и одиночных значений"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"ref()"},{"type":"text","text":" оборачивает значение в объект с "},{"type":"text","marks":[{"type":"code"}],"text":".value"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue отслеживает изменения и обновляет UI"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ 2. "},{"type":"text","marks":[{"type":"code"}],"text":"reactive()"},{"type":"text","text":" — для объектов и структур данных"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"reactive"},{"type":"text","text":" делает весь объект реактивным"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"удобно для сложных структур (формы, настройки, объекты)"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"Где именно хранится состояние в Composition API?"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"📌 Внутри функции "},{"type":"text","marks":[{"type":"code"}],"text":"setup()"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"code"}],"text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда компонент создаётся:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue вызывает "},{"type":"text","marks":[{"type":"code"}],"text":"setup()"}]}]},{"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":"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":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧠 Важно: каждое состояние — это "},{"type":"text","marks":[{"type":"bold"}],"text":"обычная JS переменная"},{"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","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":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это делает Composition API более гибким."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🌍 А где хранится глобальное состояние?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Через "},{"type":"text","marks":[{"type":"bold"}],"text":"Pinia"},{"type":"text","text":", например:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"export const useUserStore = defineStore('user', {\n state: () => ({\n user: null\n })\n})\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Но это уже отдельная тема — про глобальный 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":"В Composition API состояние хранится в переменных, созданных через "},{"type":"text","marks":[{"type":"code"}],"text":"ref()"},{"type":"text","marks":[{"type":"bold"}],"text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"reactive()"},{"type":"text","marks":[{"type":"bold"}],"text":" внутри "},{"type":"text","marks":[{"type":"code"}],"text":"setup()"},{"type":"text","marks":[{"type":"bold"}],"text":" или "},{"type":"text","marks":[{"type":"code"}],"text":"

Где хранится состояние в Composition API?

Комментарии