Составляющие Pinia хранилища

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

Структура Pinia

Итак, как мы уже с вами знаем, Pinia — это глобальное хранилище данных в нашем приложении. Мы должны с вами хранить там некие данные, которые не привязаны к нашим Vue-компонентам. 

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

Была создана вот такая несколько сложная иерархическая структура. Но на самом деле ничего сложного в ней нет, по сути у нас есть некое центральное хранилище Pinia, где может храниться какой-то объём данных, и, соответственно, мы опционально можем создать с вами дополнительные хранилища. 

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

Что же собой представляет хранилище? 

Хранилище представляет собой три элемента, из которых оно у нас состоит: это элемент state или состояние. Состояние самого хранилища. Это те данные, которые в этом хранилище хранятся. По сути это обычный JavaScript-объект с данными, которые будут храниться в этом хранилище. 

Getters и Actions в Pinia

Getters — это специальные JavaScript-функции, которые у нас обращаются к состоянию и вытаскивают оттуда данные и выдают их нашему приложению. 

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

Существует много способов, как вы можете работать с этими хранилищами, как вы можете взаимодействовать с ними, но важно понимать просто эту основную структуру, всегда держать её в голове и, независимо от того, с каким видом компонентов вы работаете, Vue script setup, Vue Composition API, Vue Options API или так далее, то соответственно, вы можете, зная вот эту структуру, понимать. 

Теперь, когда мы с вами познакомились с этой структурой, мы можем приступать к практике и попробовать создать какое-то хранилище Pinia, которое будет у нас в нашем Vue-приложении.