#pinia — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #pinia, aggregated by home.social.
-
Давай заключим контракт?
Принципы SOLID , DRY , KISS во фронтенде работают ровно так же, как в любой другой разработке. Но если открыть почти любой проект, всё равно натыкаешься на мешанину. Причём дело обычно не в том, что код «грязный» — он как раз бывает типизирован и проходит linter . Дело в том, что эти принципы отвечают на вопрос « как написать », а не « зачем мы вообще это пишем ». А без ответа на « зачем » чистый код превращается в красиво оформленную путаницу. На примере такой вещи, как store попробуем ответить на вопрос: что вообще такое контракт, зачем же нужна типизация и действительно ли это помогает в разработке .
-
Давай заключим контракт?
Принципы SOLID , DRY , KISS во фронтенде работают ровно так же, как в любой другой разработке. Но если открыть почти любой проект, всё равно натыкаешься на мешанину. Причём дело обычно не в том, что код «грязный» — он как раз бывает типизирован и проходит linter . Дело в том, что эти принципы отвечают на вопрос « как написать », а не « зачем мы вообще это пишем ». А без ответа на « зачем » чистый код превращается в красиво оформленную путаницу. На примере такой вещи, как store попробуем ответить на вопрос: что вообще такое контракт, зачем же нужна типизация и действительно ли это помогает в разработке .
-
Давай заключим контракт?
Принципы SOLID , DRY , KISS во фронтенде работают ровно так же, как в любой другой разработке. Но если открыть почти любой проект, всё равно натыкаешься на мешанину. Причём дело обычно не в том, что код «грязный» — он как раз бывает типизирован и проходит linter . Дело в том, что эти принципы отвечают на вопрос « как написать », а не « зачем мы вообще это пишем ». А без ответа на « зачем » чистый код превращается в красиво оформленную путаницу. На примере такой вещи, как store попробуем ответить на вопрос: что вообще такое контракт, зачем же нужна типизация и действительно ли это помогает в разработке .
-
Как не надо писать Store в Pinia (Vue). Разбираем на выдуманном примере
Сегодня посмотрим на вымышленный пример, как не надо делать стор. Любые совпадения - случайность. Все истории выдуманы. Представьте: есть у нас герой Алекс. Перекидывают его на проект - «поправить пару простых багов, делов на пять минут». Открывает Алекс код, а там… У него сердце замирает. Подумаешь, с кем не бывает. Но внутри начинается дилема: просто пофиксить баги и забыть этот ужас как страшный сон, либо как настоящий богатырь проектов взять и отрефакторить весь этот бардак. Сделать по-человечески, заложить нормальную основу. Да, потом спросят за новые баги - ну и что. Зато внутри тепло разольётся, что не забил на плохой код и навёл порядок.
-
Как не надо писать Store в Pinia (Vue). Разбираем на выдуманном примере
Сегодня посмотрим на вымышленный пример, как не надо делать стор. Любые совпадения - случайность. Все истории выдуманы. Представьте: есть у нас герой Алекс. Перекидывают его на проект - «поправить пару простых багов, делов на пять минут». Открывает Алекс код, а там… У него сердце замирает. Подумаешь, с кем не бывает. Но внутри начинается дилема: просто пофиксить баги и забыть этот ужас как страшный сон, либо как настоящий богатырь проектов взять и отрефакторить весь этот бардак. Сделать по-человечески, заложить нормальную основу. Да, потом спросят за новые баги - ну и что. Зато внутри тепло разольётся, что не забил на плохой код и навёл порядок.
-
Как не надо писать Store в Pinia (Vue). Разбираем на выдуманном примере
Сегодня посмотрим на вымышленный пример, как не надо делать стор. Любые совпадения - случайность. Все истории выдуманы. Представьте: есть у нас герой Алекс. Перекидывают его на проект - «поправить пару простых багов, делов на пять минут». Открывает Алекс код, а там… У него сердце замирает. Подумаешь, с кем не бывает. Но внутри начинается дилема: просто пофиксить баги и забыть этот ужас как страшный сон, либо как настоящий богатырь проектов взять и отрефакторить весь этот бардак. Сделать по-человечески, заложить нормальную основу. Да, потом спросят за новые баги - ну и что. Зато внутри тепло разольётся, что не забил на плохой код и навёл порядок.
-
Идеальный Store в Pinia (Vue)
Если спустя время у вас происходило такое, что компонент-стор разрастался, а каждое добавление или исправление логики уже пугало, то эта статья для вас. Сегодня я не буду читать лекций. Просто поделюсь тем, как сам дошел до более-менее устойчивого подхода после того, как неоднократно рефакторил чужие сторы и ловил себя на мысли: «Зачем я это трогал?». Возможно, где-то я буду неправ, возможно, в вашем проекте это не взлетит. Я не напрашиваюсь в учителя, просто фиксирую опыт, чтобы не наступать на одни и те же грабли.
-
Идеальный Store в Pinia (Vue)
Если спустя время у вас происходило такое, что компонент-стор разрастался, а каждое добавление или исправление логики уже пугало, то эта статья для вас. Сегодня я не буду читать лекций. Просто поделюсь тем, как сам дошел до более-менее устойчивого подхода после того, как неоднократно рефакторил чужие сторы и ловил себя на мысли: «Зачем я это трогал?». Возможно, где-то я буду неправ, возможно, в вашем проекте это не взлетит. Я не напрашиваюсь в учителя, просто фиксирую опыт, чтобы не наступать на одни и те же грабли.
-
Идеальный Store в Pinia (Vue)
Если спустя время у вас происходило такое, что компонент-стор разрастался, а каждое добавление или исправление логики уже пугало, то эта статья для вас. Сегодня я не буду читать лекций. Просто поделюсь тем, как сам дошел до более-менее устойчивого подхода после того, как неоднократно рефакторил чужие сторы и ловил себя на мысли: «Зачем я это трогал?». Возможно, где-то я буду неправ, возможно, в вашем проекте это не взлетит. Я не напрашиваюсь в учителя, просто фиксирую опыт, чтобы не наступать на одни и те же грабли.
-
ООП для управления состоянием во Vue
Чувак, уже есть Pinia , Pinia Colada , TanStack Query для Vue, зачем ещё один способ управлять состоянием во Vue? Меня просто задолбало писать везде флаги отслеживания состояния для действий и делать store через фабричную функцию, как это делали наши праотцы в начале 2000-х. Запоминать зоопарк из разных composable-функций и хуков. Изучать какую-то другую систему реактивности, типа MobX, тоже не хочу. Это какой-то зашквар. Я хочу использовать то, что есть: реактивность Vue везде, классы, методы. Хочу использовать классические шаблоны: SOLID, DDD и т.п. Хочу, чтобы Действие или запрос сами отслеживали и сообщали своё состояние. Хочу сконцентрироваться на бизнес-логике и писать меньше шаблонного кода. И это возможно, покажу, как это работает на примере. Погнали, если интересно
https://habr.com/ru/articles/1010774/
#vue #pinia #tanstack #store #ооп_программирование #solid #ddd #архитектура_фронтенда #typescript #javascript
-
ООП для управления состоянием во Vue
Чувак, уже есть Pinia , Pinia Colada , TanStack Query для Vue, зачем ещё один способ управлять состоянием во Vue? Меня просто задолбало писать везде флаги отслеживания состояния для действий и делать store через фабричную функцию, как это делали наши праотцы в начале 2000-х. Запоминать зоопарк из разных composable-функций и хуков. Изучать какую-то другую систему реактивности, типа MobX, тоже не хочу. Это какой-то зашквар. Я хочу использовать то, что есть: реактивность Vue везде, классы, методы. Хочу использовать классические шаблоны: SOLID, DDD и т.п. Хочу, чтобы Действие или запрос сами отслеживали и сообщали своё состояние. Хочу сконцентрироваться на бизнес-логике и писать меньше шаблонного кода. И это возможно, покажу, как это работает на примере. Погнали, если интересно
https://habr.com/ru/articles/1010774/
#vue #pinia #tanstack #store #ооп_программирование #solid #ddd #архитектура_фронтенда #typescript #javascript
-
ООП для управления состоянием во Vue
Чувак, уже есть Pinia , Pinia Colada , TanStack Query для Vue, зачем ещё один способ управлять состоянием во Vue? Меня просто задолбало писать везде флаги отслеживания состояния для действий и делать store через фабричную функцию, как это делали наши праотцы в начале 2000-х. Запоминать зоопарк из разных composable-функций и хуков. Изучать какую-то другую систему реактивности, типа MobX, тоже не хочу. Это какой-то зашквар. Я хочу использовать то, что есть: реактивность Vue везде, классы, методы. Хочу использовать классические шаблоны: SOLID, DDD и т.п. Хочу, чтобы Действие или запрос сами отслеживали и сообщали своё состояние. Хочу сконцентрироваться на бизнес-логике и писать меньше шаблонного кода. И это возможно, покажу, как это работает на примере. Погнали, если интересно
https://habr.com/ru/articles/1010774/
#vue #pinia #tanstack #store #ооп_программирование #solid #ddd #архитектура_фронтенда #typescript #javascript
-
Персональный ГеоОрганайзер «Места»
Есть множество специальных программ, работающих с метаданными — всевозможные (не будем показывать пальцем) медиаплееры с нескучными обоями, сортировкой и фильтрами по чему и как угодно (особенно как угодно), созданием и редактированием плейлистов, подгружаемыми обложками, текстами и барышнями. Есть, с позволения сказать, просмотрщики изображений с теми же барышнями, коллекциями оных с описаниями, редактированием, тэггированием, гистограммами, спектрограммами и телепрограммами. И один лишь рынок особой категории геоданных, именующих себя детьми лейтенанта Шмидта, находится в хаотическом состоянии. Анархия раздирала корпорации вроде Гугла… Ладно, я увлёкся. Но в самом деле…
https://habr.com/ru/articles/1009226/
#Vue #Pinia #Open_Source #geo #геоданные #карты #SPA #Batch_Update #pwa #typescript
-
Персональный ГеоОрганайзер «Места»
Есть множество специальных программ, работающих с метаданными — всевозможные (не будем показывать пальцем) медиаплееры с нескучными обоями, сортировкой и фильтрами по чему и как угодно (особенно как угодно), созданием и редактированием плейлистов, подгружаемыми обложками, текстами и барышнями. Есть, с позволения сказать, просмотрщики изображений с теми же барышнями, коллекциями оных с описаниями, редактированием, тэггированием, гистограммами, спектрограммами и телепрограммами. И один лишь рынок особой категории геоданных, именующих себя детьми лейтенанта Шмидта, находится в хаотическом состоянии. Анархия раздирала корпорации вроде Гугла… Ладно, я увлёкся. Но в самом деле…
https://habr.com/ru/articles/1009226/
#Vue #Pinia #Open_Source #geo #геоданные #карты #SPA #Batch_Update #pwa #typescript
-
Персональный ГеоОрганайзер «Места»
Есть множество специальных программ, работающих с метаданными — всевозможные (не будем показывать пальцем) медиаплееры с нескучными обоями, сортировкой и фильтрами по чему и как угодно (особенно как угодно), созданием и редактированием плейлистов, подгружаемыми обложками, текстами и барышнями. Есть, с позволения сказать, просмотрщики изображений с теми же барышнями, коллекциями оных с описаниями, редактированием, тэггированием, гистограммами, спектрограммами и телепрограммами. И один лишь рынок особой категории геоданных, именующих себя детьми лейтенанта Шмидта, находится в хаотическом состоянии. Анархия раздирала корпорации вроде Гугла… Ладно, я увлёкся. Но в самом деле…
https://habr.com/ru/articles/1009226/
#Vue #Pinia #Open_Source #geo #геоданные #карты #SPA #Batch_Update #pwa #typescript
-
Переезд с Nuxt 2 на Nuxt 3: почему для крупного интернет-магазина мы выбрали рерайт, а не миграцию
Пять лет назад мы запустили интернет-магазин на Nuxt 2. За это время он превратился в классический монолит: вносить правки стало дорого, а сайт начал «задыхаться» под нагрузкой. Когда вышел Nuxt 3, перед нами встал выбор: пытаться оживить проект через Nuxt Bridge или переписать всё с нуля. Мы проанализировали код и поняли: плавная миграция для нас — это путь к созданию «зомби-проекта». Слишком много фундаментальных отличий: Options API против Composition API, Vuex против Pinia, смена логики роутинга и несовместимость ключевых библиотек. В этой статье я рассказываю, как мы решились на полный рерайт крупного магазина стройматериалов и почему это было единственно верным стратегическим решением. Внутри кейса: — 4 технических «фаталити» , которые делают миграцию легаси-монолита невозможной. — Архитектура FSD + Nuxt 3: как мы подружили фронтенд с бэкендом на Symfony и навели порядок в зависимостях. — Паттерн «Фабрика»: как упростить сложную логику доставки в Composition API. — Бонус: почему благодаря правильному старту недавнее обновление с Nuxt 3 до Nuxt 4 заняло у нас минимум времени, в отличие от мучений с Nuxt 2. Если вы всё еще поддерживаете проекты на второй версии и боитесь подступиться к обновлению — этот опыт для вас.
https://habr.com/ru/articles/968118/
#nuxtjs #pinia #feature_sliced_design #vite #composition_api #интернетмагазин #typescript
-
Переезд с Nuxt 2 на Nuxt 3: почему для крупного интернет-магазина мы выбрали рерайт, а не миграцию
Пять лет назад мы запустили интернет-магазин на Nuxt 2. За это время он превратился в классический монолит: вносить правки стало дорого, а сайт начал «задыхаться» под нагрузкой. Когда вышел Nuxt 3, перед нами встал выбор: пытаться оживить проект через Nuxt Bridge или переписать всё с нуля. Мы проанализировали код и поняли: плавная миграция для нас — это путь к созданию «зомби-проекта». Слишком много фундаментальных отличий: Options API против Composition API, Vuex против Pinia, смена логики роутинга и несовместимость ключевых библиотек. В этой статье я рассказываю, как мы решились на полный рерайт крупного магазина стройматериалов и почему это было единственно верным стратегическим решением. Внутри кейса: — 4 технических «фаталити» , которые делают миграцию легаси-монолита невозможной. — Архитектура FSD + Nuxt 3: как мы подружили фронтенд с бэкендом на Symfony и навели порядок в зависимостях. — Паттерн «Фабрика»: как упростить сложную логику доставки в Composition API. — Бонус: почему благодаря правильному старту недавнее обновление с Nuxt 3 до Nuxt 4 заняло у нас минимум времени, в отличие от мучений с Nuxt 2. Если вы всё еще поддерживаете проекты на второй версии и боитесь подступиться к обновлению — этот опыт для вас.
https://habr.com/ru/articles/968118/
#nuxtjs #pinia #feature_sliced_design #vite #composition_api #интернетмагазин #typescript
-
Переезд с Nuxt 2 на Nuxt 3: почему для крупного интернет-магазина мы выбрали рерайт, а не миграцию
Пять лет назад мы запустили интернет-магазин на Nuxt 2. За это время он превратился в классический монолит: вносить правки стало дорого, а сайт начал «задыхаться» под нагрузкой. Когда вышел Nuxt 3, перед нами встал выбор: пытаться оживить проект через Nuxt Bridge или переписать всё с нуля. Мы проанализировали код и поняли: плавная миграция для нас — это путь к созданию «зомби-проекта». Слишком много фундаментальных отличий: Options API против Composition API, Vuex против Pinia, смена логики роутинга и несовместимость ключевых библиотек. В этой статье я рассказываю, как мы решились на полный рерайт крупного магазина стройматериалов и почему это было единственно верным стратегическим решением. Внутри кейса: — 4 технических «фаталити» , которые делают миграцию легаси-монолита невозможной. — Архитектура FSD + Nuxt 3: как мы подружили фронтенд с бэкендом на Symfony и навели порядок в зависимостях. — Паттерн «Фабрика»: как упростить сложную логику доставки в Composition API. — Бонус: почему благодаря правильному старту недавнее обновление с Nuxt 3 до Nuxt 4 заняло у нас минимум времени, в отличие от мучений с Nuxt 2. Если вы всё еще поддерживаете проекты на второй версии и боитесь подступиться к обновлению — этот опыт для вас.
https://habr.com/ru/articles/968118/
#nuxtjs #pinia #feature_sliced_design #vite #composition_api #интернетмагазин #typescript
-
Vue 2 в 2025: какие паттерны стоит забыть, а какие – оставить
Vue 2 в 2025 году официально стал legacy, но множество проектов всё ещё работают на нём. Миграция на Vue 3 не всегда возможна сразу, поэтому важно правильно поддерживать и модернизировать старый код. В этой статье разберём: Устаревшие паттерны, от которых лучше избавиться. Проверенные подходы, которые остаются актуальными. Альтернативы из Vue 3, которые можно адаптировать уже сейчас
-
Vue 2 в 2025: какие паттерны стоит забыть, а какие – оставить
Vue 2 в 2025 году официально стал legacy, но множество проектов всё ещё работают на нём. Миграция на Vue 3 не всегда возможна сразу, поэтому важно правильно поддерживать и модернизировать старый код. В этой статье разберём: Устаревшие паттерны, от которых лучше избавиться. Проверенные подходы, которые остаются актуальными. Альтернативы из Vue 3, которые можно адаптировать уже сейчас
-
Vue 2 в 2025: какие паттерны стоит забыть, а какие – оставить
Vue 2 в 2025 году официально стал legacy, но множество проектов всё ещё работают на нём. Миграция на Vue 3 не всегда возможна сразу, поэтому важно правильно поддерживать и модернизировать старый код. В этой статье разберём: Устаревшие паттерны, от которых лучше избавиться. Проверенные подходы, которые остаются актуальными. Альтернативы из Vue 3, которые можно адаптировать уже сейчас
-
- Moved #turso from #libSql to fetch to mitigate CORS issues.
- Realized through the migration step above, that each time the events page refreshes each event item made a turso call, thus to mitigate this setup a #pinia store.
- The pinia store has made the app faster, since the all turso calls done on first load and then functions off of that data. -
Обзор различных тактик работы с реактивным стейтом во Vue
В статье рассмотрены различные методы организации обмена данными и реактивным состоянием во Vue.js приложениях, как то: - Prop drilling - Provide/Inject - Composition API - Pinia - Event Bus
-
Обзор различных тактик работы с реактивным стейтом во Vue
В статье рассмотрены различные методы организации обмена данными и реактивным состоянием во Vue.js приложениях, как то: - Prop drilling - Provide/Inject - Composition API - Pinia - Event Bus
-
Обзор различных тактик работы с реактивным стейтом во Vue
В статье рассмотрены различные методы организации обмена данными и реактивным состоянием во Vue.js приложениях, как то: - Prop drilling - Provide/Inject - Composition API - Pinia - Event Bus
-
Vue 3 в деле: Как мы обновили большой внутренний сервис и что из этого вышло
Привет, Хабр! Меня зовут Егор Прокопьев, и я фронтенд-разработчик в Ozon. Третья версия полюбившегося многими фреймворка Vue вышла уже давно, и большинство использующих его произвели обновление до новой версии. Но всегда будут такие, как наша команда, кто откладывал этот переход в дальний ящик техдолга — ведь есть более приоритетные задачи! Однако рано или поздно этот день настаёт, и вот и для нас он пришёл. В этой статье я хочу рассказать, как мы переходили на новую версию при том, что сервис является достаточно большим и очень важным для пользователей. Но обо всём по порядку.
https://habr.com/ru/companies/ozontech/articles/844074/
#vue3 #nuxt #ozon #ozon_tech #frontend #frontendразработка #pinia
-
Vue 3 в деле: Как мы обновили большой внутренний сервис и что из этого вышло
Привет, Хабр! Меня зовут Егор Прокопьев, и я фронтенд-разработчик в Ozon. Третья версия полюбившегося многими фреймворка Vue вышла уже давно, и большинство использующих его произвели обновление до новой версии. Но всегда будут такие, как наша команда, кто откладывал этот переход в дальний ящик техдолга — ведь есть более приоритетные задачи! Однако рано или поздно этот день настаёт, и вот и для нас он пришёл. В этой статье я хочу рассказать, как мы переходили на новую версию при том, что сервис является достаточно большим и очень важным для пользователей. Но обо всём по порядку.
https://habr.com/ru/companies/ozontech/articles/844074/
#vue3 #nuxt #ozon #ozon_tech #frontend #frontendразработка #pinia
-
Vue 3 в деле: Как мы обновили большой внутренний сервис и что из этого вышло
Привет, Хабр! Меня зовут Егор Прокопьев, и я фронтенд-разработчик в Ozon. Третья версия полюбившегося многими фреймворка Vue вышла уже давно, и большинство использующих его произвели обновление до новой версии. Но всегда будут такие, как наша команда, кто откладывал этот переход в дальний ящик техдолга — ведь есть более приоритетные задачи! Однако рано или поздно этот день настаёт, и вот и для нас он пришёл. В этой статье я хочу рассказать, как мы переходили на новую версию при том, что сервис является достаточно большим и очень важным для пользователей. Но обо всём по порядку.
https://habr.com/ru/companies/ozontech/articles/844074/
#vue3 #nuxt #ozon #ozon_tech #frontend #frontendразработка #pinia
-
https://vue-cheatsheet.themeselection.com/ - a sweet #Vue #CheatSheet site with lots of examples including #VueRouter and #Pinia. Source: https://github.com/themeselection/vue-cheatsheet
-
https://vue-cheatsheet.themeselection.com/ - a sweet #Vue #CheatSheet site with lots of examples including #VueRouter and #Pinia. Source: https://github.com/themeselection/vue-cheatsheet
-
https://vue-cheatsheet.themeselection.com/ - a sweet #Vue #CheatSheet site with lots of examples including #VueRouter and #Pinia. Source: https://github.com/themeselection/vue-cheatsheet
-
https://vue-cheatsheet.themeselection.com/ - a sweet #Vue #CheatSheet site with lots of examples including #VueRouter and #Pinia. Source: https://github.com/themeselection/vue-cheatsheet
-
https://vue-cheatsheet.themeselection.com/ - a sweet #Vue #CheatSheet site with lots of examples including #VueRouter and #Pinia. Source: https://github.com/themeselection/vue-cheatsheet
-
State management in #Vue 3: Why you should try out #Pinia
https://tighten.com/insights/state-management-in-vue-3-why-you-should-try-out-pinia/
