Everything Beyond State Management in Stores with Pinia

Rate this content
Bookmark

When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Using a store in state management centralizes the state, making it easier to manage, debug, and maintain. It supports advanced features like server-side rendering, state hydration, and interaction with development tools, improving both the scalability of the application and the developer experience.

Pinia provides a more streamlined and less verbose API than Vuex, eliminating the need for mutations and allowing direct state modifications or patches. It also offers better dev tools support, a powerful plugin system, and improved performance with a smaller footprint (about 1.5 kilobytes).

Yes, Pinia supports server-side rendering (SSR), making it easier to manage state in applications that render content on the server. This is particularly beneficial for improving the performance and SEO of web applications.

Pinia provides a testing module that simplifies the process of unit testing stores. It allows developers to create a testing instance of Pinia that isolates the store from the rest of the application, making it easier to test state management logic independently of component behavior.

State management refers to the handling of an application’s state using a global object and functions to manage and change this state. It is usually implemented to manage the complexity of larger applications, ensuring that the state remains consistent across different parts of the app.

To integrate Pinia into a Vue.js project, you need to install Pinia, create a store using the `defineStore` method, and then use the `createPinia` function to attach your store to the Vue application. This setup centralizes and manages the application state effectively.

Pinia is an alternative state management library for Vue.js applications. It offers a simpler and more flexible API compared to traditional options like Vuex, supports both Vue 2 and Vue 3, and enhances developer experience with features like dev tools integration, hot module replacement, and testing utilities.

Plugins in Pinia extend the library's core functionality. They can modify or enhance the behavior of your stores, subscribe to state changes, intercept actions, and integrate with other parts of your application like routing. This provides a flexible way to customize state management according to your needs.

Eduardo San Martin Morote
Eduardo San Martin Morote
34 min
20 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.

1. Introduction to State Management

Short description:

Hi, I'm Eduardo, a frontend developer and a member of the Vue.js core team. Today, I want to discuss what is beyond state management and why it matters. State management is not limited to complex applications. It depends on how the store is used within your application. Transitioning from a basic reactive global state management solution to a store is a small step with significant benefits, such as server-side rendering and state outletting components. A centralized state shared by many components ensures scalability.

Hi, everyone. My name is Eduardo. I live in Paris. I'm a frontend developer and also a member of the Vue.js core team. I'm the author of its router and a small library called Pina, which is an alternative to Vue.js, a store library, as well, that I'm going to talk about today.

What I want to talk to you about is not only Pina but what is beyond state management, what matters in state management more than the state itself. But first, before even diving into Pina or anything else, what is state management? It's just having a global object with a few functions like that, global state. You have a function logging that allows you to change a state. Is this state management? And people will tell you that it is. And to be honest, it pretty much is, especially if you just add a reactive function call around that object. Well, you have a completely valid state, global state solution working for your view three or view two application.

And this is still state management and some people will tell you but state management is something you have and you create when you have bigger apps or medium to big apps or when you know your application is going to grow and is going to need that complexity in the future. But this is it is pretty much like, you don't need to have a complex application to need or consider using a state management solution or a store. That what defines what defines if you should or not use a state management solution is how the store is used inside of your application. For example, is your state used in many different places in pages or does your state out these pages? Do you need your state when you go from one page to another? Maybe your application only has three pages, but you require that, um, state to out leaves all the pages. And in that scenario you need a state management. And then the next question that comes to your mind, to to my mind is should I stop to, uh, should I stop having that bare bones reactive global state management solution or should I use a store? And the truth is there is a very small step to get to use a store. You just need using defined store with PNIA or UX5 and you can pretty much keep the same things that you were having. The state is going to be in a vertical state. Then you're going to have, uh, the global state variable is going to become these. So equals something. So the change is very simple. And the cost in terms of size, it also, uh, very small is like 1.5 kilobytes for PNIA. Um, but of course it comes with many other things, right? So do you really need a store? What makes you change your mind? What it means to go from, okay, I'm going to stop using my variable in solution and start using a store.

And there are a few reasons that will make you go that direction. The main reason is server side rendering, uh, is definitely so much easier to handle with the store like PNIA or Vuex, um, but there are many more, so you also have state outletting components. Uh, this is pretty much thumbs out of the box for the state management solutions as well. But, uh, depending on how and where you want to instance it, the global state is not something that always comes in. And then you have the centralized state shared by many components. So, if you create one single global state, that's not going to scale forever.

2. The Benefits of Using a Store like PNIA

Short description:

If you keep adding things to your state, it will get bigger and more complex. Using a global object for state management lacks developer experience and makes it difficult to track changes. Testing and implementing additional functionality becomes more challenging. With a store like PNIA, these issues are resolved, and everything comes out of the box.

If you keep adding things, new functions, new properties to your state, at some point that state and that file is going to get bigger. You can split multiple files as well, but you're going to make your object grow in complexity way too much. And that's going to create all If you watch the state or do any other complicated stuff.

You also have a better developer experience. So, if you are using a global object, you cannot inspect, change that state within Dev Tools somewhere. You have to do it manually through the component inspector. You don't have anything in the timeline. You don't know where the changes to the store, to the states come from. If you have if you want to keep your state while you are changing the store or your state management solution, it's going to reload the page, you will have to handle hot mode replacement yourself. Then if you want to test or you need to test your components, you are going to need to mock your state management solution or test it twice.

So, have tests for your state management and also test that rely on the behavior of the store in the component. And then if you want to handle local storage or undo redo or any other functionality that is more generic and that applies to any store, any state management solution, you are going to have to implement that by yourself, whereas if you have a store, all these things come out of the box. You don't need to do anything. So this is why I want to talk to you a bit about how do we achieve these things, and what are these things that exist when you use something, a store like PNIA, and may you consider using one.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
Watch video: Vue: Feature Updates
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
State Management in React with Context and Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
Roy Derks
Roy Derks
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance