16 – Pinia (Setup Store) | Vue 3 e Composition API

If you are working with Vue 3 and the Composition API, you may have come across the concept of Pinia for managing state in your application. In this article, we will look at how to set up a Pinia store in Vue 3 using the Composition API.

What is Pinia?

Pinia is a state management solution for Vue 3 that is built with the Composition API in mind. It provides a simple and efficient way to manage global state in your application, making it easy to share data between components and manage complex application state.

Setting up a Pinia Store

To set up a Pinia store in your Vue 3 application, you will first need to install the Pinia package. You can do this using npm or yarn:


npm install pinia


yarn add pinia


Once you have Pinia installed, you can create a new store by creating a file for your store and importing the createPinia function from the pinia package:


import { createPinia } from 'pinia';


Next, you can use the createPinia function to create a new instance of the Pinia store:


const pinia = createPinia();


Finally, you can export the pinia instance from your store file:


export default pinia;


Using the Pinia Store in your Components

Once you have set up your Pinia store, you can use it in your components by importing the pinia instance and using it to create and access your store:


import { useStore } from 'pinia';
const store = useStore();


With the store instance, you can now access and modify the state in your Pinia store from your components, making it easy to manage and share data across your application.

Conclusion

Pinia is a powerful state management solution for Vue 3 and the Composition API, providing an easy and efficient way to manage global state in your application. By setting up a Pinia store and using it in your components, you can take advantage of the benefits of state management while working with Vue 3 and the Composition API.