Hello, and welcome to the course. My name is Daniel Kelly, and I'm a full-time instructor here at Vue School. I'm so excited to be guiding you through learning the ins and outs of Pina, so let's get started. js applications?
Well, Pina is a state management solution created by Vue core team member, Eduardo San Martin Moreau, who also created Vue Router. js docs. Awesome. So it's got the backing of the official Vue maintainers and is probably our best choice at this point for state management.
But what is state management and why might we need it? As you're probably aware, Applications often need access to the same data, even across different components. Without some form of global state management, we're left emitting that data up via events to parent components and passing that data down as props to child components. And while this approach definitely has its place, depending on the size of the application and all the places where that data is needed, this can quickly get unmaintainable.
That's where a state management solution like Pina comes in. Instead of each component keeping track of its own state and passing that state around, Pina acts as a global store, storing state in a single place and passing it out to components as they request it, as well as providing mechanisms for components to mutate it. Don't let me confuse you though. I don't mean to say that Pina is a replacement for props and events, but rather it complements them.
Some data is best preserved at the component level. But for all that state that isn't, Pina is there. I often hear the question, when do I introduce state management to a project? Is it reserved for only larger projects, or can it be helpful in smaller ones too?
Well, the answer to this question is somewhat subjective, but my recommendation is this. If the scope of your project is smaller and not ever expected to grow beyond five to ten components, let's say, then Piña probably isn't necessary. Furthermore, if the application simply has no state, which is shared amongst multiple components, then you could go without Piña. Such a case will most certainly only ever be true with the smallest of apps, though, such as a small demo or educational projects and the like.
However, if you'd like the project to scale beyond the simplest of applications, either now or in the future, I'd start out with Piña. even from the very beginning of the process, as it's more difficult to refactor later and there's really no downside to using it right out of the gate. Lastly, in this video, let's quickly examine why you might choose to use Pina over some of the other state management solutions like VUX or a home world solution such as with the Composition API. First off, Pina's simple and well thought out API makes writing your stores as familiar as creating components.
This also means there's less boilerplate code and fewer new concepts to learn compared to a solution like Vue X. Next, with Pina, all your data types are inferred, which means that stores provide you with comprehensive and accurate autocompletion, even in JavaScript. Also, unlike home-rolled solutions, Pina comes with DevTools support to view and alter your state directly from the DevTools, as well as use of the timeline to view mutations to the store. over time.
For those cases where the default behavior isn't enough, it also provides a comprehensive plugin system in order to extend its default behavior with such features as transactions, local storage synchronization, or really anything you can dream up. Another great API design opinion is that it's modular by default. This means better code organization for your stores and more performant applications as your code bundler is able to automatically code split those stores. Lastly, Pina is extremely lightweight by design, clocking in at only about 1 kilobyte.
This makes it trivial to add to any project, and a no-brainer for performance. js. And with its well-designed API, intuitive usage, and tiny footprint, it's easy to understand why. At this point, if you're thinking Pina is a good fit for you, then I invite you Follow along with me in this course as we build a Vue and Pina powered pineapple stand together.
During the course, we'll learn how to store data in modular Pina stores, access it in components, mutate it using actions, and debug it using Vue DevTools. Finally, by the end of it, you'll be ready to start using Pina for yourself.