{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 "},{"type":"text","marks":[{"type":"bold"}],"text":"Если состояние влияет только на UI и поведение конкретного компонента — оно должно быть локальным."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это главный принцип. Теперь разберём подробно."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🟦 Когда локальное состояние лучше?"}]},{"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":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"состояние формы ("},{"type":"text","marks":[{"type":"code"}],"text":"email"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"password"},{"type":"text","text":")"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"открыт/закрыт dropdown в карточке"}]}]},{"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":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":")"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"состояние input ("},{"type":"text","marks":[{"type":"code"}],"text":"value"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"isFocused"},{"type":"text","text":")"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Глобальное состояние тут не нужно — только усложнит приложение."}]},{"type":"horizontalRule"},{"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":"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":"text","marks":[{"type":"code"}],"text":"isLoading"},{"type":"text","text":")"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"состояние ховера ("},{"type":"text","marks":[{"type":"code"}],"text":"isHovered"},{"type":"text","text":")"}]}]},{"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":2},"content":[{"type":"text","text":"3) "},{"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":"\n\n\n"}]},{"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":2},"content":[{"type":"text","text":"4) "},{"type":"text","marks":[{"type":"bold"}],"text":"Когда состояние не нужно «передавать вниз» и «не нужно другим»"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если данные не пересекаются между компонентами → держи локально."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"5) "},{"type":"text","marks":[{"type":"bold"}],"text":"Когда легко управлять через props/emit"}]},{"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":"Зачем глобальный store? Достаточно родителя."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"6) "},{"type":"text","marks":[{"type":"bold"}],"text":"Когда глобальное состояние усложняет архитектуру"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Иногда store создаёт больше проблем, чем решает:"}]},{"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":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если данные простые — не нужно выносить их в Pinia."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🟩 Когда НЕ стоит выносить локальное состояние в глобальное?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если:"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"❌ этим state не пользуется больше одного компонента"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"❌ это UI-состояние (модалка, вкладки, меню)"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"❌ компонент должен иметь свою собственную копию state"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"❌ данные не нужны при смене страницы"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"❌ нет нужды синхронизировать несколько компонентов"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Частая ошибка джунов — «тащить всё в глобальный store»."},{"type":"hardBreak"},{"type":"text","text":"Это делает приложение сложным и раздутым."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Примеры конкретных ситуаций"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"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":"Никому кроме этого компонента оно не нужно."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"❌ Плохо: вынести это в Pinia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Такое состояние глобальным делать нельзя — это UI локального поведения."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✔ Хорошо: локальное состояние формы"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const email = ref('')\nconst password = ref('')\nconst errors = reactive({})\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Не нужно хранить это в store — это локальная логика."}]},{"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":"Локальное состояние лучше глобального, когда:"}]},{"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":"✔ поведение относится к UI"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✔ каждый экземпляр должен иметь своё состояние"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✔ props/emit хватает"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✔ global store только усложнит код"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Глобальное — только когда данные общие для многих частей приложения."}]}]}

Когда локальное состояние лучше глобального?

Комментарии