Pinia Vue Что это и зачем нужно?

Что такое Pinia Vue

В этой небольшой серии видео мы с вами поговорим о таком инструменте для фреймворка Vue.js, который называется Pinia. 

Что это за инструмент, для чего он нужен и в каких случаях мы должны с вами его использовать? Давайте подробнее рассмотрим в этом видео.

Давайте начнём с того, что официальный сайт этого инструмента находится по адресу https://pinia.vuejs.org. 

Как вы видите, это дочерняя официальная библиотека, которая относится к Vue.js. Первое, что мы должны с вами понимать, что это просто библиотека для фреймворка Vue.js, расширение этого фреймворка.

Зачем нужна Pinia?

Для чего же эта библиотека нужна? Эта библиотека для создания центрального хранилища приложения. В нашем приложении, любое приложение, которое мы разрабатываем, у него есть состояние, какие-то данные, которые к этому приложению относятся. 

Мы можем хранить эти данные в привязке к конкретному компоненту, то есть мы с вами знаем, что у каждого компонента Vue.js есть уровень данных, и соответственно, мы можем хранить этот state внутри компонентов. 

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

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

Особенно часто это бывает нужно, например, при разработке игр и так далее. Вот такие вот сложные системы, где у нас много компонентов, эти компоненты вложены друг в друга и нам нужно обмениваться данными между компонентами. В этом случае нам потребуется, конечно, центральное хранилище. 

Когда Pinia не нужна

В принципе, мы можем обойтись без центрального хранилища, мы с вами знаем, что компоненты могут обмениваться между собой данными. Для этого дочерние компоненты принимают, соответственно, пропсы, свойства, и если произошло какое-то событие в дочернем компоненте, он может отдать его наверх — родительскому компоненту, который, в свою очередь, передаёт его дальше. Но если у вас сложная структура, вам придётся очень много передавать данных вот таким вот образом, писать очень много кода, который будет передавать данные с одного компонента в другой. Именно поэтому было придумано такое центральное хранилище. 

Это относится не только к Vue, к любым реактивным фреймворкам: для каждого реактивного фреймворка есть какое-то центральное хранилище, где могут храниться данные, то есть либо в компоненте они хранятся, либо в центральном хранилище, и соответственно, когда у нас есть центральное хранилище, глубоко вложенному дочернему компоненту не нужно проходить такой длинный путь для того, чтобы получить какие-то данные, он может напрямую обратиться к Pinia хранилищу и получить оттуда какие-то данные из этого state.

И самое главное преимущество Pinia в том, что можно легко достаточно легко создавать разные сущности, и у нас будет как некое такое центральное хранилище — Pinia, и в этом центральном хранилище будет что-то вроде таблиц базы данных, то есть некие данные, которые относятся к какой-то конкретной сущности, то есть мы можем создать много сущностей, и в каждой сущности, как в таблице в базе данных, хранить какую-то информацию, и, соответственно, любой компонент может легко получить доступ к общим данным, которые относятся к этому разрабатываемому приложению.

Вот такое вот введение. Надеюсь, стало более понятно, для чего нужна эта библиотека для Vue, и соответственно, в следующих видео мы будем учиться с ней работать, взаимодействовать и посмотрим, как это всё применить на практике.