Vuex 4 & Firebase Auth Tutorial #3 - Vuex & the Composition API

Key Takeaways

so then gang now we've seen the basics of how view x works how we can make a store add states and mutations and then access all of this from inside components and at the minute we do all of this using the options api which is the slightly older way of working with vue.js where we define methods and computed values like this as properties on our component object now i'd like to show you how to do this using the composition api instead which doesn't use these properties but instead uses a setup hook and then inside that setup hook we can place all of our reactive values and methods and then return the ones that we need to use in the template at the end of it now again at this point i'm assuming you already know a bit about working with vue this way using the composition api if not definitely check out my view three courses first of all because i talk about them extensively in those the links are going to be down below anyway the way we work with vuex using the composition api is by using a function new in view x version 4 called use store and this gives us access to the store and the state and mutations on that store so the first thing we need to do is import that function from the view x library and like i said this is brand new to view x4 so make sure you have that version installed for this to work so what i'd like to do then is basically keep all of the same functionality we're still going to get the points from the store and we're still going to commit this mutation right here but we're going to do it all inside the setup hook using this function right here use store now the reason we need this function ustor is because we need to use that function to get access to the store itself now before when we use the composition api down here we could say this dot store but we don't have access to this inside the setup function so we can't do that in here and that's why we use this instead because this function returns to us the store so i'm going to say down here const and i'll call it store and set it equal to use store like so and what that does is get us access to the store so now this is basically the same as this thing right here and we can use the same different properties and methods on it so i could grab the points i could say const points is equal to something now it's a computed property much like we used a computer property down here so we need to say computed and also we need to import that from view as well this is the way we work in the composition api we import the functions we need and then inside that computed function we basically just want to return a value and the value that we want to return is going to be the store which we have access to because of this right here dot state dot points so it's exactly the same as this down here the store.state.points only instead of using this dollar sign store we use this function to get the store and use the properties on this instead okay so now we can return the points down here so this now is doing exactly the same thing as this so now we can get rid of this computed property we don't need that anymore all right so next let's do this method so same again we just need to create a function so i'm going to call this update points again and we set it equal to a function we're going to take in the points p call it what you want i called it points down here but i'm calling it p up here so as not to get this p confused with the points we have right here so then inside the function all we need to do is say store dot commit and then whatever mutation we want to commit which is update points in our case and then pass in p as the second argument that's the payload all right and then we can return that down here update points we can spell it update points like so and now this does exactly the same thing as this we take the store we commit a mutation and we pass in the payload p and that's what we did down here okay so now we can get rid of this methods thing as well like so and now all of this should work exactly the same way only now we're using the composition api and doing everything inside the setup hook so first of all we get the store using this use store function then we create this points computed property which is accessing the points from the state on the store and then we create a function called update points we're taking an argument p to be the new points and then we commit a new mutation on the store called update points and pass in the new value of p and remember that is this mutation right here which is updating our state so now we've returned all these down here which is still being used up here so let's save this and give it a whirl all right so we can see the state initially is zero for the points if we add a point it should go up by one each time which it does awesome and if we click this one it goes down by a point each time awesome so this all works so it's doing exactly the same thing only this time we've used the composition api and that use store function from the ux to interact with the store and this is only available in view x version 4 because it was made to be used with view 3 which is heavily involved with the composition api so make sure you're using vuex version 4 in order to use this use store function now for the rest of this series we're going to be using the composition api and using the store this way