Vuex 4 & Firebase Auth Tutorial #2 - Vuex Basics

all right and gang so before we dive right into setting up ux to manage our authentication state first i want to lay the groundwork and explain the basics of using vuex with a simple example for all of the uninitiated and those completely new to vue x so in this lesson we're going to create a simple view x store to hold some states and then access and update that state from a view component now in this video we'll be going old school and using the old options api to do this where we define our methods data and computed values as properties on our exported view objects and then in the next lesson i'll show you how we can work with view x using the newer composition api and the setup hook instead and then that's what we'll be using for the rest of the series as well so now let's create a new simple view x store so the first step is to go into the store folder that i've already created and inside the index.js file and we're going to create that store right here now in order to do this we have to import a function from view x and that function is called create store so that comes from view x all right so now we can use this function to create a new store and i'm going to store that in a constant called store you don't have to call it store you can call it whatever you want so we set that equal to create store and we invoke that function and as an argument we pass in an object and it's inside this object that we can declare any state so i could add a state property which is an object and inside this object we could have any properties we want so this object represents our state inside the store so say for example i want to track some kind of value like points or score well i could create a point property inside the state object and set it equal to a value now we could access this value by using this store in other components all right first of all though we need to export the store so let's do that at the bottom export store so we say export default and then store which is this constant right here now before we can actually use the store state in components we have to use the store inside the main.js file that kickstarts our application so you know like we use the router right here we do a similar thing to use our store that we just created first of all we have to import that store so let me say import store right here and we'll say import store from dot forward slash store forward slash index so we've imported that store which is this thing right here now we just need to tack on another use method after the router and we can say store in here like so and then dot mount at the end so now we're using our store for our view application and that means we can use that store and access the data inside it or the state inside it in our view components so let's do that i'm going to cross off this file save this file and then inside the home components i want to now try to access the point value of the state right here so the way we use inside this component now when we're using the options api is by creating a computed property for the points so i could open up my computed object right here and create a new computed value called points and that's a function remember computed values are functions which return a value and this returns now this to refer to this instance of the view components dots and then dollar sign store and we can access this store value right here because we said inside the main.js file use the store if we didn't do that then we wouldn't be able to access this value but now we can access the store and on that is a state property and that state property is this object right here now we want to get the points property from the state so i can say dot points like so so now we can use this computed value inside our template somewhere if we wanted to so i'm going to do that at the very top inside the home div i'm just going to create a comment first of all to say view x basics and then below that i'm going to output the points inside a div so i will say points and then in double curly braces which is what we use to output any kind of value dynamic value in the template i want to output the points and that is the name of our computed value right here remember when we output a computed value we don't have to invoke this over here we just say whatever the name of that value is which is points and what that does is give us this value right here so it should be zero to begin with because that's what the point is right here okay so let's cross our fingers and see if this works okay so now in the browser we can see zero points right here so that has worked we have successfully created a store with a bit of state on it with that points value which is zero to begin with then we've used that store in our view application and that means we can access it in our view components we've accessed it and we've output it inside the template right here now you might be thinking this is a lot of work for a simple piece of state like this and it absolutely is if this is all we were doing then i wouldn't use a vue x store but i wanted to show you the basics of ux first of all before we move on to doing something more complex okay so now we're accessing the value but what about if we want to change the value of this points state in the store now the way we update states inside a store is by using what's known as a mutation and a mutation is just a special function that we use to update state so to create mutations we need to add on a mutations property to the store itself which is an object and inside this object we can declare as many mutations as we want so say for example we want to create a mutation which is going to update or mutate this bit of state the points i might create a mutation function called update points like so and this is a function and inside the function as arguments we take two things first of all the state object which is the current state at the point in time that we call this mutation and then as a second argument a payload and the payload is just extra data that we might pass into this function that maybe is going to be the new value of the points or some other piece of state or it could be used to determine the new value of the points so inside here what i could do to update the points is say state dot points and set it equal to some new value now i could just do 10 and then every time we call this mutation it would just set the state points to be 10 instead of zero but i don't want to do that i want to set it equal to something else what i want to do is set it equal to the current points plus whatever we pass in as a payload so we're going to pass in a number for example one or five or something else what i want to do is take the current points which is zero at the minute and add that one or that five to it so it updates it to be whatever it currently is plus the payload okay so to do that we'll say states dot points and then plus the payload so if it was currently five and we're passing one then it would be six because we take five the current state and then add one to it which is the payload all right so that's it that's our mutation created and now what we can do is call this mutation inside a view component to update the state so let's do that now i'm going to go back to the home components and then down here we need to create a method to update the state so i'm going to create a method called update points now i've also called this update points but they don't need to be called the same thing i'm just calling them the same so what i want to do is pass in the points here as an argument that i want to update them by so that could be one two three something else it doesn't really matter and to update it we say this dot dollar sign store to access the store much like we did down here and then we use a method called commit and this is how we actually call a mutation function we commit a mutation if you like so this takes in two arguments the first argument is the mutation that we want to commit and that's this thing right here so i'm going to copy that and paste in right here and the second argument is the payload that we want to pass in now remember that is this thing right here and it can be any value but we're going to pass in a number so i will pass in for example 1 and then every time we call this method it will commit this mutation update points and it will pass in one as the payload right here now i don't actually want to hard code this as one i want it to be the points variable right here that we pass into this function so it makes it more reusable if we want to update the points by different values because that could change then all right so now we can use this method inside the template somewhere so what i'm going to do is create a couple of buttons down here so button one is going to be for adding a point so we'll say add a point and then the second button is going to be to remove a point so we'll say remove a point so we need to attach click events to these so i'll say at click and set that equal to update points which is the method we just created right here update points and we're passing the points that we want to update it by so that's going to be plus one because we want to add a point now i'm going to copy this dude and paste in right here and at this time it's going to be -1 because we want to remove a point so now we're passing those values in and those values are being passed into this commit as well so when we call that and we run this function then the payload is either going to be plus one or minus one now when it's plus one the point is obviously going to go up by one when it's minus one it's gonna go down by one does that make sense so let's give this a whirl in the browser all right so when i click on add a point then it adds one to the points right here when i click on remove it removes a point from the points total right here okay so this is all working so now what we've done is create a store we've added some state to it points and we've also created a mutation which is used to mutate the state or change the state and that is just a function now in order to call a mutation from a component we use that commit method on the store and we say what mutation we want to commit and then also we can pass in the payload which is what we're doing right here minus one for remove a point and plus one for adder points all right so that's then updating our state right here so then now hopefully you can see the basics of how view x and view x stores work we define state on them which can be accessed by any components and we can mutate the state by using mutations which can also be accessed by any components at the minute we're just doing this from the home components but we could also do something similar in the other components like in the nav bar or in the login view and remember you have to import and use the store inside the index file which kickstarts our view application for this auto work so next up i'll show you how to do all of this using the composition api instead of this approach which uses the options api

Channel: The Net Ninja

Views: 3,765

Keywords: vuex, vuex tutorial, vuex 4, vuex 4 tutorial, vue vuex, vue vs vuex, vuex 3, vuex chrash course, new in vuex 4, tutorial, vue, vue js, vue.js, vue 3, vuex vue 3, vuex composition api, vuex firebase, vuex auth, vuex firebase auth, firebase, firebase auth, firebase auth tutorial, vuex store, vuex stores, mutation, mutations, vuex state, vuex global state, vuex mutations, vuex mutation

Id: bUHVGPx6IMo

Length: 11min 45sec (705 seconds)

Published: Mon Nov 29 2021