Intermediate Vue

Why Do You Need State Management?

Ben Hong
Pandan Studio
Intermediate Vue

Lesson Description

The "Why Do You Need State Management?" Lesson is part of the full, Intermediate Vue course featured in this preview video. Here's what you'd learn in this lesson:

Ben discusses the importance of state management libraries like Pinya, highlighting how they provide a set of standards for teams to follow, ensuring consistency and facilitating collaboration. He points out that Pinya offers features such as dev tools for easy inspection and modification of state, while also addressing performance concerns by optimizing tree-shaking to avoid unnecessary bulk in the application.

Preview
Close

Transcript from the "Why Do You Need State Management?" Lesson

[00:00:00]
>> Ben Hong: Some of you may be thinking, why do you need state management? After all, you have the power of composables. Who needs it anymore? I can do everything. We don't need state management stores. Yes, it is true. We basically model how data stores work. You basically are doing your state, your getters, your actions.

[00:00:18]
The thing I always tell people about state management libraries is that what you're providing your team is a set of standards that everyone can follow. Now granted, if you're going to author your own internal state management library that you heavily document and that's type safe, and if you want to do all that, that is awesome and I like more power to you.

[00:00:37]
But one of the things that things like Pinia does allow us to do is the fact that you have these full time open source maintainers who are basically trying to create, especially within the VUE community, they're very motivated to create the best UX they can give you. And so, for example, you can see here in the new dev tools, let's see this here, here's like the little pinny icon, little pineapple.

[00:01:00]
You see here, you can actually see all the stuff. You can inspect it and even modify it, if you need to test anything, save it down. It can even track like the timeline in terms of mutations. So I believe if I went in here and changed this. Let me hide this real quick, update task.

[00:01:23]
I think, I think I know why, because that one's not connected yet. But you can see here, basically you get a lot of this work for free. And to be honest, if you look underneath Pinia in particular, it's really not that far from composables. It's just a set of standards that's kind of been agreed upon by the community.

[00:01:41]
So if you're worried about bulk and that kind of stuff, Pinia has already, unlike for those of us who were in the Vuex days, the Vue 2, that was heavier because a lot of times you had to do a lot to manually optimize the performance of it. So back then a lot of people would use global stores, basically one big store, and they would chunk out small stores.

[00:01:59]
But what they didn't know was that all the stores are being lumped in together. So anytime someone loaded something, they were loading. It was the whole like, ask for a banana, get the rainforest kind of thing. And so Pinia by default, every time we do something like we see here where we just do like a tax store, time entry store, those are already tree shaken, they're separate.

[00:02:18]
They're basically the equivalent of these composables we have here, where as long as you're importing them on specific files, it's already doing that for you. There's no giant glob that's being built together and then being shipped to your users. And so, for that reason, I find that, generally speaking, state management libraries are helpful for especially large teams, teams that need some standards.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Start a 5-Day Free Trial