#pinia — Public Fediverse posts

Как не надо писать Store в Pinia (Vue). Разбираем на выдуманном примере

Сегодня посмотрим на вымышленный пример, как не надо делать стор. Любые совпадения - случайность. Все истории выдуманы. Представьте: есть у нас герой Алекс. Перекидывают его на проект - «поправить пару простых багов, делов на пять минут». Открывает Алекс код, а там… У него сердце замирает. Подумаешь, с кем не бывает. Но внутри начинается дилема: просто пофиксить баги и забыть этот ужас как страшный сон, либо как настоящий богатырь проектов взять и отрефакторить весь этот бардак. Сделать по-человечески, заложить нормальную основу. Да, потом спросят за новые баги - ну и что. Зато внутри тепло разольётся, что не забил на плохой код и навёл порядок.

https://habr.com/ru/articles/1028052/

#vuejs #store #pinia

Идеальный Store в Pinia (Vue)

Если спустя время у вас происходило такое, что компонент-стор разрастался, а каждое добавление или исправление логики уже пугало, то эта статья для вас. Сегодня я не буду читать лекций. Просто поделюсь тем, как сам дошел до более-менее устойчивого подхода после того, как неоднократно рефакторил чужие сторы и ловил себя на мысли: «Зачем я это трогал?». Возможно, где-то я буду неправ, возможно, в вашем проекте это не взлетит. Я не напрашиваюсь в учителя, просто фиксирую опыт, чтобы не наступать на одни и те же грабли.

https://habr.com/ru/articles/1020074/

#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

Персональный ГеоОрганайзер «Места»

Есть множество специальных программ, работающих с метаданными — всевозможные (не будем показывать пальцем) медиаплееры с нескучными обоями, сортировкой и фильтрами по чему и как угодно (особенно как угодно), созданием и редактированием плейлистов, подгружаемыми обложками, текстами и барышнями. Есть, с позволения сказать, просмотрщики изображений с теми же барышнями, коллекциями оных с описаниями, редактированием, тэггированием, гистограммами, спектрограммами и телепрограммами. И один лишь рынок особой категории геоданных, именующих себя детьми лейтенанта Шмидта, находится в хаотическом состоянии. Анархия раздирала корпорации вроде Гугла… Ладно, я увлёкся. Но в самом деле…

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

Переезд с 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

@[email protected] #vuejs #javascript #architecture #dev #pinia

Vue 2 в 2025: какие паттерны стоит забыть, а какие – оставить

Vue 2 в 2025 году официально стал legacy, но множество проектов всё ещё работают на нём. Миграция на Vue 3 не всегда возможна сразу, поэтому важно правильно поддерживать и модернизировать старый код. В этой статье разберём: Устаревшие паттерны, от которых лучше избавиться. Проверенные подходы, которые остаются актуальными. Альтернативы из Vue 3, которые можно адаптировать уже сейчас

https://habr.com/ru/articles/928578/

#vue3 #pinia #typescript #javascript #vue2 #vue27

Kenne ich Leute mit Erfahrung in #vue und #Pinia?

Обзор различных тактик работы с реактивным стейтом во Vue

В статье рассмотрены различные методы организации обмена данными и реактивным состоянием во Vue.js приложениях, как то: - Prop drilling - Provide/Inject - Composition API - Pinia - Event Bus

https://habr.com/ru/articles/878722/

#state #pinia #store

#Nuxt latest, installé par npx, crashe si on lui installe le module #Pinia.

wtf les gars, testez vos outils un peu.

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

【Vue】Piniaを使った状態管理
https://qiita.com/k12da/items/ad7d6e38f5edeb8750f3?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #Vue_js #Nuxt #Composition_API #Vue3 #Pinia

【Vue】Piniaを使った状態管理
https://qiita.com/k12da/items/ad7d6e38f5edeb8750f3?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #Vue_js #Nuxt #Composition_API #Vue3 #Pinia

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/

#vuejs #javascript

Авторизация и управление доступом на основе ролей для фронтенда

В этом модуле проекта мы погрузимся в волнующий мир авторизации и управления доступом во фронтенд-разработке. Сегодня я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript. Однако, стоит отметить, что основные принципы, которые мы рассмотрим здесь, применимы к любым современным технологиям фронтенда. Таким образом, даже если вы предпочитаете другой стек технологий, вы все равно найдете этот материал полезным. Мы сфокусируемся на разработке системы авторизации и управления доступом на основе ролей для фронтенда. Этот аспект веб-разработки играет ключевую роль в обеспечении безопасности приложения и определении функциональных возможностей, доступных разным пользователям. Давайте начнем наше путешествие в мире фронтенд-разработки, изучая, как эффективно реализовывать авторизацию и управление доступом с использованием современных инструментов и лучших практик. Приготовьтесь к увлекательному погружению в мир безопасности фронтенда!

https://habr.com/ru/articles/798403/

#авторизация #доступы #роли #фронтенд #vue #pinia

is sitting at an Irish bar, listening to music from last year's Eurovision, and trying to figure out #Pinia.

#VueJS

Updates on PKP Admin UI Technical Roadmap

* doubling down on #Vue.js, reducing use of Smarty templates

* catching up with Vue.js ecosystem - Composition #API & #Pinia Store

* updated Page Architecture

* new Composables as replacements of mixins

* styling with #TailwindCSS

Vue state management: Pania stores или composables с глобальные рефами?

На Reddit прошла интересная дискуссия с 25К+ просмотрами по вопросу предпочтений разработчиков при необходимости управлять глобальным состоянием во Vue 3. Ниже её итоги.

https://habr.com/ru/articles/780274/

#pinia #vue #composition_api #reactivity #ref #state #state_management

Vue state management: Pania stores или composables с глобальные рефами?

На Reddit прошла интересная дискуссия с 25К+ просмотрами по вопросу предпочтений разработчиков при необходимости управлять глобальным состоянием во Vue 3. Ниже её итоги.

https://habr.com/ru/articles/780274/

#pinia #vue #composition_api #reactivity #ref #state #state_management

Как мы делаем проекты

Все мы знаем что такое клиент-серверное приложение, на тему их создания написано не мало статей. В этой статье хотелось бы поделиться с вами наработками нашей компании, которыми мы пользуемся в своих Django проектах.

https://habr.com/ru/companies/pm/articles/759690/

#Djagno #HBA #vue #pinia #channels

using #pinia state management with #vue is super useful, but I find testing it quite cumbersome

https://dev.to/deepgram/build-a-to-do-list-app-with-pinia-and-vue-3-2a4n - familiar with #Vue's #VueX? Here's an intro to #Pinia. Great tutorial https://github.com/SandraRodgers.

Что ж так сложно то в этом вашем #angular и #rxjs
Торможу и никак не могу въехать.
С #vue и #pinia как-то проще было
@ru @rf

#nuxt with #pinia #tailwindcss and #supabase makes creating websites so easy these days. It’s crazy.

Learned about the #Vue store #pinia and now I am exploring some connections with #OpenLayers
to make layers and map events dynamically available in the whole web app

https://pinia.vuejs.org/

https://dev.to/philipjohnbasile/grilling-vue-3-essentials-on-pinia-skewers-3noc #VueJS #Vue3 #vue #Pinia

I quite like using #Vue 3's script setup style. Very little boilerplate and defining props as TS types is great.

https://vuejs.org/api/sfc-script-setup.html

https://pinia.vuejs.org/ is also 👍 I couldn't stomach #Vuex with its string-based actions or whatever.

#Pinia just makes sense to me. It doesn't try to do very much at all. It just lets me define reactive models and import them into my components.

Using Pinia/composable or provide/inject to avoid prop drilling and event bubbling problem for components in the same tree, that is the question. What do you think?

https://www.reddit.com/r/vuejs/comments/11yy8wz/prop_drilling_and_event_bubbling_problem/

#vuejs #pinia #component

in case anyone is also looking for articles covering using the composition approach with #Pinia here are the two I've found thus far:
https://coderpad.io/blog/development/how-to-handle-state-management-in-vue-using-pinia/

https://webmobtuts.com/frontend-development/learn-how-to-use-vuejs3-pinia-store-management-with-simple-example/

I'm looking for good examples of using #Pinia in #Vue using the composition style rather than the options style. Curious if anyone has some good pointers? Most of the articles I've found use the options style...and the official docs switch back/forth between options/composition a bit too frequently for my tastes.

(Okay, I just found two...right after posting the question :-P But still, send me anything you've got!)

#javascript #question

👋 👋
Recuerda que puedes encontrarnos en tus plataformas favoritas:

Spotify: https://open.spotify.com/show/6oPZBuoJxLWsj6X5SRJ8e9
Apple Podcasts: https://podcasts.apple.com/us/podcast/my-typeof-radio-desarrollo-web-en-espa%C3%B1ol/id1525642310?ls=1
Google Podcasts: https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5idXp6c3Byb3V0LmNvbS8xMTkwNjkzLnJzcw==

Así como nuestro sitio web: https://mytypeof.dev

#podcast de #webdev en #espanol
#javascript #desarrolloweb #vue #vuejs
#pinia #svelte #vscode #programacion

IMO global stores like in #vuex, #pinia or #redux are just as bad as global variables.

Finally I can start my #100daysofcode

Day 0 of 99:

I've tried to follow a tutorial on how to program a Single Page application with #vuejs3 , #vite and #Pinia .

I must say it was a very challenging and I've realized that I'm missing the basics. So tomorrow I will start reading the official vuejs guide/tutorial again.