85. Setup the Vuex state management in the authentication project in Vue js | Vue 3.

hi friends this is leela welcome to my channel in the previous video we have seen about the design and the setup of the login and signup page for the authentication we have seen right now in this video what we'll try to do is we will try to set up the ux thing ux authentication so we will be using for authentication ux state management so as we have learned in the previous videos so we have learnt the ux state management right so we will use the viewer state management here for performing the authentication thing so now for doing this vx authentication let's try to set up this one so what we need to do in the source here i need to create a folder with the name store and in this store what i will be having is i will be having another one modules okay in this module i will be i will be creating another folder auth so we are doing it perform we are dealing with the authority so that is the reason i created auth and in this auth i can create index.js so this is the module now in the store what i will try to do i will try i will create store.js so this is the main store file here what i will try what i will do before trying before this one we will try to install the ux uex at the red next so this is the command for installing the ux the ux in our project so let it install it will take some time ux has been installed in our system in our project now here what i will try to do i will create constant store is equal to so one object and here i will export default store i will export this store and now what i what i need to do here create store and use the create store and this create store takes the object now what is the object so first one will be the modules so now modules i need to do the module auth auth i need to import now here i will be creating the index.js here i can do export default and in this one it will be having first one will be the state written state like this written thing and we will be having the mutations and getters getters and also another one will be the actions so these are the three things you will be having some projects what they will try to do is they will try to create here mutations.js okay and here another one getters.js and last one is actions.js actions.js and here in this one what we can do this getters will have export right now we don't have anything so export default it's an object and in this one mutations also export default and this one is also an object and another one is the actions actions also export default and this is an object so these are plain objects for right now so here what i can do these are mutations it will extend the mutations i can remove this one all so this one will be imported from those files here what i can do import mutations from mutations okay dot mutations in the same scenario what i can do import actions from actions so this is this one is also one of the actions and here another one is import getter site getters from getters so these are the three files we have imported so you can write directly here if the name and the file name is same means so you can a name is you can write like this if they are different means we can write like this also so if both the key and value are same means we can remove this value and we can directly place it like this okay so these are the three things we have imported now let's go to the index.js for index.js we have this one right so now here i can write name is equal to state lila or something like this i have i have created one variable now what we need to do we can we can name space this one name space is equal to true so that these things will be name space we these all things will be namespaces names pasted okay now in the store.js what do we have what we can do is we have imported the module auth now if i go here if i want to import what i need to do here import auth from so where it will contain in the modules slash auth slash index we need to import the index so these are the store how we have created now we got the uh create store and all those things now we need to add this create store in the main.js so we have just set up the store only now we need to add it in the main.js so here what i can use app.use of store so directly so we i have used this app.user so now we have successfully set up the connected the store to our project now let's check that whether the store is connected or not now here let's try it on the server npm run sir let's check whether we have any errors or not so far we don't we didn't get any errors now let's try to check the output so if i try to check the output we didn't get any output login is working let's try to check that uh check the store and we use it in the login dot view so login dot view here and if you want to connect the store what i can do is compute it i can use the computer directly and here i can use map state and that map state it should be imported from ux right so this should be imported and i need to get the state right map state i can use this map state and here i can add map state okay first one will be the namespace and next one will be the object right now what is the first thing we are having here over here we are having the map state right so we imported from this map state from the view x so what could be the name in the uh we need to go to the auth.js so in the store in the modules in auth in the index you will be having here the name so we need to use this name so let's go to the let's use this name now go to the login dot view here the name the name the name will be the module name auth and here we need to use the name so whatever the name you want you can use it here and the state it goes to the state dot name okay so here i can use i can use it whatever the name you want if you want you can use it as a first name also you can use it as first name also not a problem so this name is not mandatory so if i want to use this one i need to use this one here so here i can write it as first name so here let's try to check the output now here i am able to get the stately law so that means the state we have been successfully connected okay now the mapper parameter must be either an array or an object it is saying okay so what is the problem so let's check in the view x thing so if we refresh this one we are not getting any error so not a problem so hope it's not a problem so path means for the home page we didn't given the path so that means we can we can assume we can write it like this so map state auth first name we got it right so now if i try to refresh this one so we are able to go to the login okay i will be able to go to the login and i am able to get the data here stately so this is how we we have successfully connected this one so if i go here and index it and if i change it to only layla okay so if i change it to lila web do let's try to check once again so now here i'm able to get the lila webb so this is how we will be uh connecting the store to the project okay in the next video we will try to do the login authentication thing and we'll try to save the data in the ux state management okay if you have any doubts or any sessions please post the comments below to this video and if you like this video please do support me by subscribing to my channel thank you

Channel: Leela Web Dev

Views: 1,557

Keywords: vue js, vue js 3, vue js tutorial, vue 3 tutorial, vue 3, vue3, vuejs, vuejs tutorial, vue js tutorial for beginners, vue.js tutorial, web development, vue instance, vue js crash course, vue js project, vue tutorial, vue.js tutorial for beginners, vue authentication, authentication in vue, vuex, vuex state management

Id: a8s7Vx0oMmI

Length: 8min 42sec (522 seconds)

Published: Sat Nov 21 2020