Pinia Simplified

pina is a new popular data store solution that is built off the composition api in this video we'll highlight the features of pina compared to vue x and then see how to use a penis store inside of our view app so one of the biggest differences between vuex and pina is the fact that pina is modular by design in other words it's built to have multiple stores in comparison view x only has one store and then you could have sub modules underneath it but pina allows each of these modules to be their own store imported directly into components where needed and this allows bundlers to code split and have better typescript inferences another difference is that while vue x has a state mutations actions and getters pina does not have mutations and only has state actions and getters and there's a good reason for this previously mutations were needed to add necessary dev tooling to see when exactly a component will change but with a lot of u3's core features exposed we can still see exactly when our state is changing without needing a specific mutation using the same kind of logic pina also lets us directly mutate our state and we can see those changes in our dev tools and just like i'm showing now pina does automatically hook into views dev tools so as soon as you install it it'll add a tab that shows a timeline and lets us track what changes are happening to each of our stores so let's go ahead and use this inside of our project let's say npm install pina and then inside main.js we want to import createpenia from pina call app.use and then invoke the createpina method now let's create our first store let's create a folder called stores that will house all of our stores even though in this video we're just going to create one and that will be called counter.js first what we want to do is say import define store from pina and then we'll export a const use counter store set it to define store and this takes two arguments the first one is a unique name and we'll call a counter and then the second one is an object that has our different options first we'll define a state and set it equal to an arrow function that contains the initial state of our store so we'll just return an object with a count of zero next let's define some actions by saying actions creating an object and our first function will be called increment this is a great time to point out that similar to other data store solutions we can pass arguments into these actions so let's say val and give it a default value of one and inside we can directly mutate our state by accessing this and saying this dot count plus equals val and we can also make these actions asynchronous so for example if we say async wait and add we can first call a set timeout and then increment this.count and then the final store property that we want to define is our getters and these are essentially computed properties for our store so for our example let's create one called double count create an error function that accepts our state and return state.count times two and that's all we have to do to our store then let's open up a component and we can import use counter store from store slash counter then to actually create a reference to our store let's say con store equals use counter store here we can directly mutate our state by saying store.count we can call our actions by saying store.increment and then passing in a value and if you want to see a full list of what's available in the store object we can just console.log store and then inside of our template all of our properties are exposed under store let's create an h1 that says count equals store.count an h2 that says double count is stored double count a button that says increment and one clicked calls store.increment and another button that calls weight and add and let's check it out so as you can see we load in and if we hit increment that will immediately jump and then if we call weight in increment it'll wait two seconds and then all of the reactive values will update and this is already perfect we can import this store into many components and our data will be synced up one thing to note is that when we access store like this we get an object wrapped with reactive so while we don't need dial value to access our properties we also cannot destructure it and maintain reactivity so for example if we said const count equals store this isn't a reactive value but there is a pina helper called store to refs that creates any reactive property inside of our store into a ref that we can now destructure so if we say cons counts store to refs of store count is now a reactive ref and will work as expected so hopefully this penis simplified video is enough to get you up and running but i'd love to hear what pina topics you'd love to see covered in the future i know that in my last community post this was a popular topic that you wanted to see so i wanted to create this intro video to the technology and hopefully create more in-depth videos depending on what you're interested in so let me know in the comments down below and as always like and subscribe for more view content

Channel: LearnVue

Views: 85,699

Keywords: vuejs, web development, technology

Id: LfWpPRId5N0

Length: 4min 28sec (268 seconds)

Published: Fri Feb 11 2022