Vue.js 2: Zero to Hero with Vuex Store and Vue CLI 3-Complete Guide | RapidDev Pro | Skillshare

Vue.js 2: Zero to Hero with Vuex Store and Vue CLI 3-Complete Guide

RapidDev Pro, Full Stack Developer & Tech Entrepreneur

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
60 Lessons (5h 6m)
    • 1. Introduction

      1:58
    • 2. Tools used in this course

      0:24
    • 3. Install nodejs and npm

      0:38
    • 4. Section Intro

      0:43
    • 5. Object and Array destructuring

      6:09
    • 6. Spread Operator

      9:04
    • 7. 'this' keyword in Regular vs Arrow Function

      13:37
    • 8. Async Await Vs Promise

      13:33
    • 9. Getting started with Vue JS: Creating Vue App

      5:42
    • 10. Two way data binding using v-model

      2:20
    • 11. Conditional Rendering

      4:31
    • 12. v-bind directive

      3:29
    • 13. Event handling and Methods

      4:46
    • 14. List Rendering

      4:03
    • 15. Dynamic Class Styling

      4:43
    • 16. Computed Properties

      6:33
    • 17. Filters

      2:06
    • 18. Components

      7:49
    • 19. Lifecycle Hooks

      4:25
    • 20. 'this' keyword in Vue Instance

      3:42
    • 21. Project Overview

      2:39
    • 22. Installing Vue CLI

      1:02
    • 23. Creating/Setting up App with Vue CLI

      1:53
    • 24. Project Structure

      3:44
    • 25. Integrating Bootstrap Vue

      2:16
    • 26. App Header Component

      3:49
    • 27. Setting up App Layout

      4:45
    • 28. Add Product Form UI

      7:10
    • 29. Handling ESLint warnings

      3:34
    • 30. Add Product Form Validation

      9:41
    • 31. Setup JSON Server - REST Endpoints

      4:40
    • 32. Fetch product list from REST Endpoint

      4:34
    • 33. Parent Child Component

      2:11
    • 34. Passing Props to list product component

      8:13
    • 35. Add product functionality

      8:09
    • 36. Delete Product functionality

      7:44
    • 37. Update Product Part-1

      7:34
    • 38. Update Product Part-2

      6:41
    • 39. Update Product Part-3

      6:09
    • 40. Project Overview: Vuex + Vue Routing

      1:02
    • 41. What is Vuex and What problem does it solve

      5:14
    • 42. Vue Devtools

      1:50
    • 43. Setting up project with Vuex and Vue Router

      6:08
    • 44. Setting up Product Manager App with Vue Router and UI

      14:45
    • 45. ESLint Config Update

      0:53
    • 46. Creating State in Vuex Store

      8:14
    • 47. Implementing mapState

      3:34
    • 48. Implementing Getters and mapGetters

      5:47
    • 49. Set Products Action and Mutation

      9:01
    • 50. Add Product Action and Mutation

      5:08
    • 51. Delete Product Actions and Mutation

      4:01
    • 52. Update Product Actions and Mutations

      5:38
    • 53. Implementing mapActions

      2:50
    • 54. Vuex Strict Mode

      4:39
    • 55. Managing Spinners and Loader

      8:52
    • 56. Implementing Mixins and Toast UI

      14:39
    • 57. Environment Variables

      3:50
    • 58. Fixing ESLint errors

      1:46
    • 59. Building Vue JS App in Production Mode

      1:16
    • 60. SOURCE CODE

      0:24

About This Class

Learn Vue.js 2 from scratch with Vuex State management library and Build Awesome Real World Application with Vue.js


What is Vue.js?

Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications

What is Vuex ?

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

The state, the source of truth that drives our app.
The view, a declarative mapping of the state.
The actions, the possible ways the state could change in reaction to user inputs from the view.


Advantages of Vue Js Framework:

Approachable

Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!

♦ Versatile

An incrementally adoptable ecosystem that scales between a library and a full-featured framework.

♦ Performant

20KB min+gzip Runtime, Blazing Fast Virtual DOM, Minimal Optimization Efforts



You will learn the following things in the course:

Build Real World Application with Vue jS and Vuex state mangement library.

♦ Learn Vue JS concepts such as: directives, methods, computed properties, two way data binding, conditional rendering, dynamic classes, props, events, filters, life cycle hooks and much more.

♦ Learn to create Single-Page-Application (SPA) with Vue Routing

♦ Learn how to communicate between parent-child components using Props and Events.

♦ Understand Vuex State management library concepts such as Actions, Mutations, Getters, State.

♦ Learn how to architect user interface into re-usable components.

♦ Understand all lifecycle hooks provided by the Vue.js.

♦ Learn mapAction, mapState and mapGetters in Vuex.

♦ Learn to manage Environment variables in various modes such as development and production.

Form validation in Vue.js

♦ Learn about Mixins  in Vue.js.

♦ Integrate bootstrap-vue library to create awesome UI in Vue.js.

♦ and more

Transcripts

1. Introduction: Hello, everyone on Welcome to my course on Huge is to complete guide from scratch toward once level with ex state management and juicy like three. My name is jeopardized broke on. I'm going to build instructor in the scores. So in this course, we're going to learn the powerful huges framework from scratch by learning its basic concepts such as computed properties, lifecycle hooks, methods make since the activator and much more once you basically understand, if you just basics, then we'll move on with creating a deal World Product Manager application. So this product minutes that application is going to interact with the rest in point and we'll perform the operation such as create update, feds and Millet products. All right on for the you, I will be making use off the boats review component basically already to create the awesome good looking user interfaces. And we will also implement the form validation in places such as air product form and the update product. Farmers Well, and since we're going to build the user interface is using the reusable components, then we'll understand. How can you share the data between the components using the props and the events Now, once you start skilling up your application by adding more and more functionality, you will see that the props in the events flow or the architect er becomes quite complex because once you're competent starts to grow, then it becomes quite difficult toe handle the data using the props in the event. So we will solve this problem by implementing the View X State Man is many library okay on will use its concepts such as the state actions, quotations and get us okay. And we will completely replace the existing app will give you access State Management library. And once we implement a view X state in our application, then we'll also see how can you love rates. The view Death tolls are to debug the application level state off your application by inspecting your application level state using the mutations. So what if you want to learn the amusing and powerful huges framework from scratch, so the red ones level Then I highly recommend you check out this course. So let's get started today, and I hope to see in my court 2. Tools used in this course: Hello, everyone. So in this will do I just quickly wanted to show you the tools that we will be using in our course. So for the quarterly that I'm using, the V s scored on for their criminal. I'm using this. Come under terminal for windows. Okay. And if you want to have the exact same set up as me and then you can download the stools. So you guys, that's it. Just wanted to give you a brief information regarding the same on. Thank you so much for watching this video. 3. Install nodejs and npm : Hello, everyone on in this video, we're going to see how can you install nor Jess and NPM on your machine. So don't install it. You can simply visit, nor J start org. Then go with your download section on You can our downward according to an operating system . So as you can see, I have already downloaded all you have to really single double click an install. And once you're done with the installation you can head over to their terminal on. You can simply say Lord hyphen V to check the North version on NPM high friendly, protect the NP emergent. And then pin comes bundled with the Norges so you don't help. One started explicitly. So they're checked for this video. Andi, thank you so much for watching it. 4. Section Intro: Hello, everyone. So this is just a brief introduction off board we're going to learn in this section. So in this section, we are going to cover some of the basic concepts off the modern JavaScript. So we're going to have a look at the object and already structuring spread operator arrow function versus regular function and how the this keyword differs in arrow function versus regular function. And then we're also going to have a look at the promise. Worse is, they think of it. So these are the concepts that we're going to learn in this section. I know there are a lot of other concepts the letter to the modern JavaScript. But I only wanted to cover those concepts that we're going to use in this view. Jay scores. Okay, so you guys, let's get started on, Learned this concept 5. Object and Array destructuring: Hello, everyone. So in this video, we're going to understand what is day structuring on How can we use their de structuring? So districting basically allows you to fetch the properties from the object on values from the into individual variable. So let me show you by example or they mean by that. So here I'll create a file called as they structuring, nor Jay's OK, now, in this file, I'm going to First World declared a user object. Okay, on this user object is going toe Hold some of the property such as name as David then we have ages. For example 22 then we have city as so like city on Finally, we have country as USA A OK, so let's say we have the user object now. What we want to do is we want to fact to the name and the country into individual variable . Okay, so the way you would do without the districting is very declaring available over here. So you would say const name equals user Gortney. And you would say const country equals user dark country. Okay, No, let me the same play playing these two variables over here, so I didn't say name as name A with you. Okay. On the same 40. Currently. Okay, so now let me open up a terminal Onda on this particular fight. So here, I'm going to say Nord the structuring George's. So, as you can see, we got the name is David and the country, as you say. Okay, now let's see. How can we do the same? Using their day structuring? So is that blue Before that the succeeding allows you to fight city properties from the object. Okay. And here, really, as of now, using the object will also consider the example of theory. But let's first have a look at the object. So first of all, I'm going to commend this out and the way you can destructor this object is basing Const. Then you have the space of medical lib assists. Then you have to specify the property names that you want to fight from this object. And remember that this property name should match the properties president in the object. So, for example, I want to face the name and the country. Okay, so this is how I would do it and I'll pass the user object. Okay, So what it will do is it will basically source for the name property in the user object and the current country property in this user object. Okay. And it is going toe create the same to individual variable with those values. OK, so this is not creating object. Okay, this implicating to conserve variable. So let me simply say this And since we're control logging this very well, be sure against get the same dessert. Okay, so here, I'm going to see north. This fucking gorgeous so as you can see again, regard this individual variable. Ok, so a lot of people get confused, like whether it is an object or something, But no, it is just creating two variables. Okay, This is how our districting works with the objects. No, let's understand. How can we deal with the party as well? Okay, so here, first of all, I'm going to declare in Caldas Maya on Let's assume that it is holding lusitans one toe, three and four. Ok, now let's say you want to fetch the force revalue into individual variable. Okay? So we don't restructuring. The way you can do it is blessing const. Food equals toe my array off zero. Then you would say, Const bar, it will go my way off one and finally const. As equal do my a day off. Okay, so let me just spring this individual variable so that you can see properly for its food, okay? And then I'll simply putting the bar as well. And the last one is the jazz. Okay, so let me open up a terminal, okay? And school over here so that you can see properly. So now I will say, Lord, restructuring Dodgers. Okay, so these were the previous locks, but as you can see Okay, So this is not food. This is full. OK, so as you can see, we have this fool as one bar is too, and the jazz as three. Okay, So this is how you would do it with Alderdice factoring by simply fighting the value from the using the indexes. Now, let's see, how can we reduce this number off? Lines on use their destructing. So I'm going to come in this out, okay? And here I am going to say const and I'll declare this square brackets. So remember that in games of object, the structuring we were declaring the Taliban assists. But in case off the restructuring, we have toe are declared the square brackets. Okay. And first of all, I'm going to simply positive city. Now, what I want to do is I want to fetch the 1st 2nd and third index value on I send them into individual variable. So I'm going to stay here simply so full. Then I'm going to hearsay bar and I'm going to say jazz. Okay, so in case of object restructuring, it was looking out for these properties in this object. But in case off Ray, what it will do is it will try to fetch the index according to index. So the first valuable point to this zeroed in next, the second value will point to the forced index and the Third Valley were pointing to the second index. Okay, let me simply say this and again we showed City same result here also. So as you can see regarding forwards one bodies to win the jazz as three. Okay, So you guys, this was all about the restructuring. Okay, So it allows you to basically reducing the more off line for declaring the individual variables from objects or a raise, OK? And you were frequently and go under this kind off court pattern in every modern JavaScript framework. Okay, so there is This was all about the restructuring on I hope you were able to understand on Thank you so much for watching this video. 6. Spread Operator: Hello. Everyone on in this. Really? If you're going to understand what a spirit operators in tax on, how can we use it? So basically spread operatives in text allows you go fetch the elements from the variables such as our A string and even the object says Well, so let me show you by example. So first of all, I'll hear create a file. Karla's spirit operator. George is okay. And let's say I haven't had a over here called as everyone. Okay, which is holding values are just warn to entry. Okay. No, the way you can make use off spirit operator is by simply saying, let me show you by example, This index for it is triple dot on the your trouble with this away. Okay, so let me to save this. Let's go to the terminal on about this particular file. So I'll say North spirit operator Dajae. So as you can see regard, they weren't 23 Okay, So what this index is doing is it's simply taking out the values from this area and spread it over here. Okay, so it just printed 123 Okay, Now what I want to do is Let's suppose that I have another day. Cordes Const Are they? Do we just require toe 45 and six. Now let's I want to create Thurday using this forced to always so I can simply say concert a tree equal toe I can spread over the other one. Okay, then I can spread over all the values off the radio, and that's it. That's all I need to do. So let me just console log this as well. Okay, let me simply say this on down this file. So as you can see, I got it. Artery, which holds value such as 1234 which belongs to the 1st 1 Okay, so it is spreading over here, and then we have 456 Okay, which belongs to the secondary. Know, if I was not using this spirit syntax than what would have happen is that it is going to simply, um, put this whole array instead off values over here. So this word form on estate. Okay, so let me show you. So, as you can see, this is your main today and insert off this. You have this whole array. So this is the everyone on. This is the radio, but that is not what we want, right? It is creating a complex data structure. No. One more important thing about the spread operator is that along with the spreading values , it always make a copy off the sore. So, for example, here, the sources. Everyone on here, The sources are there too. So it is not going toe. They're friends this way over here. Okay. It is always going to make a copy. So how it is beneficial for us. So whenever you make a copy to a new area and if you make changes to the newer than it is not going to reflect on the old one, right? So that's also ended one days off this pretty operator. Now, let me this also show you the example how their friends creates the problem. And it's not like spread operator is mainly for solving the difference problem, although it is spreading out values. But it is also creating a copy off those sores. Okay, it is not going to the friends it. So let me show you by example. So I will come in this out, okay? And let's assume that we wanted to keep the other three as the other one. So the one means to do this, we just simply assigning the everyone podiatry. Okay. And let's suppose if I change the area tree on, push some other values such as six over here on. Let me simply print both off the area. We're here. Okay, So I'm going toe for India. Where one as well as theory three. Okay, so they're going to save this. Go to the terminal on if I run this particular file. So, as you can see aboard the array holds the same value. That means the six eyes post toe the area one as well, even though I just pushed her to the rectory. Now, the reason this happened is because this is creating a friends to the array three. Okay, so it is not creating a copy offered. Now, one ways to solve this problem is by using the A one dot slice matter. Okay, So what this will do? Is it instead off for a friend singer? They want to the territory. It is going to make a copy off the area, one to the other three. So let me just around now. So, as you can see, this time, the everyone is holding its original value, which is 123 only. And since we pushed the six value to the other three, it is holding 123 and successful. Okay, so, no, I am going to somebody comment on this line. Okay? And instead of slice matter, I'm going to make you love the spread operator, which is everyone okay on Let me the sport do triple dot over here. And magma tried to run this again. And you will see that again. The everyone is holding its original values, and the tree is holding 1236 Okay, so that means this spread operator always makes a copy off the source instead of creating a difference. Okay, Okay. So now that we have understood everything about the arrays, now we will understand. How can we work with the object using the spread Syntex? Now I'm going to make it off the same object that we used in the previous video, which was this one. Okay, which is a user object and holding some of the properties. So let me just simply call this as user one, okay? And Let's assume that we want to create a user to object. We told the same values, but I just want to change the name from David to John. So let's see, How can we do this? So here I'll say user toe, which is equal to user one. Okay. And I want to change the value as user to dot name, equal toe John. So let me just console of both off this. So he writes a console log. Use that one, which is user one over here. Okay, on. I'm going to console along user to as well. Okay, Now, let me open up a terminal on school. Don't. Over here on. Let me just put on this fight. So now you would see that the user one named property is overrated with the John. Okay. Even though I only apparently user to object. So the reason this happened is because user one is being created as a reference to the user to object. Okay, It has not been covered, so let's see, How can we copy this? So the one needs to make use off the object, the signature, so I'm going to simply say object, not a sign. And I is their target object where I want to copy the object. Okay, so their target object issues there, too. And this source object is the user one. Okay, Now, if I run, leave this fight again. You will see that the original object, which is user one, is holding the same name property with this debit and their target object updated. The name property is John. Okay, Now, let's see. How can we basically do everything using this print operator that we're doing over here? Okay, so the idea is to make simply a user to object, and over it the name properties, John, using the spread operator. So I'm going to come in this out, okay? And here, I'm going to say, const user toe equals to object. So first of all, I'm going to spread away all the properties off the user one Okay on. I want to update the name. Okay, so he rides. His name is John. Okay, on Let's I want to add extra property, which is gender, Okay. And I'll call your desk meal. Okay, Now, this name property will be overrated in this user to object because we're spreading the all of this property over here on this name, Robert is already present. Okay, so it will be overrated. And since this gender is a new property which is not present in the user one object so it will be simply I did for the user to object. Okay, so let me just write good on this again. Let's see what result over get. So as you can see, the original object is holding the same values. And the new object has the Jonah's new property. Also, it has the gentle property that we I did over here. OK, so as you can see how easy it is to our makers off this print operator OK on simply had some properties to it on. You can see that even though I know what I did the name property, it is not being overrated. Toe the user. One object because you're this creating a copy of the user. One object, nor did their friends okay on and you can see instead off these three lanes it is the court guard converting to just sing aligned right on. In fact, there should have been one more laying for riding the gender over here. Okay, So in fact, the four lines are converted now, so just single line. Okay. So as you can see, how easy it is to work with this spread operator and how it basically is the least spread over the values again from the terrible, such as object. But as well as strings on it is going to create a copy off the source instrument. The difference. Okay, So you guys, this was all about this spread operator on. I hope you were able to understand on Thank you so much for watching this video. 7. 'this' keyword in Regular vs Arrow Function: Hello, everyone on in this video, we're going to understand Worchester difference. But when did a girl function and the arrow functions Okay. So apart from this in text difference, there is also a difference off how both off this function treat that this keyword in JavaScript? Okay. And it is what it is important to understand about duty, ski word when it comes to arrow functions versus regular function. Specifically when you are working with the View Jays and I'll show you that electron. But first of all, let's have a Syntex difference between the regular functions and the aero functions. So first of all, here I'm going to create a file called as index dot html on Dhere. I gendered the estimate boilerplate. Okay. And if you're in the US court, then you can simply press exclamation and then tab. Okay, so it is going good and ready this boilerplate for you. So here that I'm just simply adding a message. Carla's regular function. What is this arrow function? Okay on? I'm going to greater Js file. So here, let me simply say adult function Norges. Okay, on here. I'm going to include this fight. Okay, so here also script. Okay, I instead of the SRC, I'm going to simply say out of function nor Jesic. So let me simply create and user object that we used in the previous videos as well. Okay, so it has, for example, it has a name property off John. Okay, so for civil, I'm going to greater our regular function. So I'm going to simply say grating over here, which is a function okay on. I'm going to simply concerned. Look. Ah, this dot name. Okay, Now I'm going to run this particular file on the local hosts over. And if you're on the year scored, then you can make use off this life server extension that I'm using right now. So here you can simply say, right click on click on open lifestyle so it will open up the severed, as you can see, Then you can open up the Consul Izabal. So what I'm going to do now is simply show you how it works. OK, so first of all, I'll go to this particular Js file on. I'm going to simply say user dot grating. Okay, let me see if this on. Let me just see over here So, as you can see, we have this John console log over here and now I'm going to declare an adult function. But before that, I want to show you another way off writing regular function, which is called this shorthand function. And you would see this a lot in view Jay's friend book. So instead, off declaring like this, you can simply remove this function keyboard on, remove this colony as well. Okay. And simply saved this on. As you can see again, we have this John consulate. That means it is running properly. Fine. Now, this Syntex would confuse a lot of people because the object simply holds the key and the value part. OK, but that's how it is. That is also very off writing this shorter and function on it is very much followed in the huge is okay, So you would see like this So minimally acea function. Insert off the object on DSI like this. Just assume that it is a cruel entered days. Okay, so that's about the regular function. Now let's move on to the arrow function. So first of all, let me re name this as grating, but I get it on here. I'm going to simply say greeting adult. Now, the way you can are declare the arrow function is by simply saying Kahlan than parenthesis . And this at a function. That's it. This is all you need to do. Okay? And if you had returning single line, then you don't even need to apply the Liberators like this. So festival here. I'm going to say concern lock Hello from Adul function. Okay, on Dhere. Instead of greeting, I am going to say grating regular on here. I'm going to say in greeting Adul Okay, Every saviors. So, first of all, we have this John message from here at a girl function. And we have this. Hello, Miss it from the other functions. Okay, so that's all about this in Texas. Now, let's understand how both of this function treat that this keyword in JavaScript. Okay, So, as you can see, I'm using this over here in the regular function. So here I am. Would you simply say this dark name? Okay. Okay. And I'm going to simply save this, so let's see what happens now. So as soon as I saved this Ondo, as you can see here, the John, It's printed, which is president instead of this object on as if No, we don't see anything from here. Anything over here? Okay, so why is this happening via the name property was available. So this regular function, but it is not available to this arrow function. Okay, so remember that Did this keyword inside off the regular function were forced to the owner off this function? Okay. And I'll explain you in a bit of what is the owner of dysfunction? Andi, this keyword inside of the arrow function refers to deep aren context. OK, so whatever this is inside of different context, it reinforced. Oh, that. Okay, so let's understand each off this thing one by one. So the currently on doug or not off this grating function? Treating regular function is this user object. Now, this user object is the owner north. Because this grating function is declared inside of this you user object. But the user object is the owner off this grating function because the user object is ultimately calling this function. So let me show you what I mean by that. It's not supposed that we have a user to object. Okay. On What I'm going to do is I'm going to create a copy off this user function and pasted inside of the user object using the object daughter segmental so their target object is the user toe and the source object is the user itself. Okay. And here I am going to say user to dark name equals David. Okay? And here we were Lear calling the greeting regular function using the user object. Now I'm going to call the greeting regular function, using the user to object. So here I am going to say user took not greeting regular. So let me simplicity of this. And now you would see that the first log is the John. Okay. And the 2nd 1 is delivered. So this time that this is referring to the user to object. Okay. Earlier that this wasa refering to the user object. Even though the greeting regular function is declared inside off the user object only in both the cases. So that means the owner of the function is not dependent on their the your function is defined. Where is the owner of the function? Depends on where it is being called. Okay. Who is calling that function. So currently, in this case, the user object was calling that function, so they were not off thes insert off these regular function. Is this user object? Next time we're calling the greeting regular function, using the user to objects for this keyword. It refers to the user to object, not the user object. Okay, so that's an important thing to understand when it comes to regular function. Now, let's understand what the This keyword they're forced to insert of the arrow function. So they're told you before that, did this keyboard inside of the arrow function refers to the parent context. OK, so whatever is there in the current context, this is going to refer to that particular context. Okay, so let me add a console log so that you can simply see properly. So I'm going to simply say console, log this keyboard inside off regular function. So let me just simply console log this. Okay, Onda here. I'm going to simply say this key word inside off. No function on. I'm going to simply printed this, okay? And for a moment, let just commend out the user to things so that everything is easy to understand and clear . Okay, so I've saved this and meeting is our life. So let's observe each of this thing one by one. So currently what we have done is we have simply playing told this instead of the regular function. Right? So let me just open this this keyword in sort of regular function. So as you can see your disappointing to the user object itself. Okay, We have the name dropper take getting regular function and degrading at a function. Okay, so it is refering todo user of the object. And that's what I said that this insert of the regular function, they're forced to the owner of that function. And since you're calling the user object itself, though none of their function is used object and this inside off the arrow function, they're forced to dependent context. OK, not the owner of the function. So let's see, what bring do we get for the other function? So this is the window object. Okay. So, as you can see, this in sort of the arrow function is referring to the window object. That means they're not going to get in the in property since it is not declared on the window object which is a global object in javascript hence were not able to see anything over here. So now what I'm going to do is I'm going to simply go over here. Okay on. I'm going to add a console up and let you see. What do we get when we praying that this keyword in the global scope OK, so let me say this. So as you can see in the global scope, thes points to the window object itself right on a Z. You can see over here that in the arrow function this is pointing to different contexts. And the parent context is this global object, which is a Rino object. Okay, hence we're not getting anything for the name property. Okay? And that's the reason why the arrow functions are known to be in lexical. A scope on lexical scoping basically means that the value of the variable depends on the context where it is defined. Okay, so this is the main difference that I wanted to let you know about the taste. Okay? How it differs when we declared in the regular function on buses the arrow function. Now there is one Brickey case over here. Okay, so let me just show you that particular tricky case, okay? I hope you don't get confused with that. Okay? So let me just quickly walk around current situation, which is currently in global school. We have this window object over here. Okay, Whenever we are referencing this in sort of this function, it is referring to the user object. Okay. And when it comes to other function, it is again pointing to the window object. So I just told you that the this keyword is lexical schooled in sort of the arrow function . That means it depends on the context, Very justifying. OK, it takes value from the parent context as simple as that. So what if I declared I don't function inside off irregular function? Okay, that's an interesting scenario. So let me be clear and anonymous function okay on it is going to be a narrow function, So here, I'm going to console, log on for the message. I'll say a special case, okay. And I'm going to print out deities keyboard over here, and let's call it dysfunction. Okay, on. I have declared this, and if he okay, so if you don't understand What this If in javascript it's an immediately and walk function expression. Okay, so this will be called as soon as this function is called. Okay, this'll function doesn't wait to be called by someone else. OK, it will be called by itself. So let me say this popular thing. And now you would see that again that this keyword in the global scope is pointing to the window object Qualifying this giver instead of the regular function is pointing to the owner off the function which is this user object? Fine. This keyword inside off arrow function over here is pointing to the parent context in which is global object window object. Okay, now, in this special case where your arrow function is present in sort of the regular function Okay, so let me just show you Well, so as you can see here in the special case, your dis keyword is pointing to the user object similar to the this keyword pointing instead of the regular function. Okay, so how this happened. So as I told you before, that the this keyword eyes lexical scope that means it takes devalue from the parent context on for the this particular scenario, the parent context is dysfunction. Okay, not the global window object. So for this particular aero function, it's been in context. Is this much? Okay, so this is pointing to the user object hands the arrow function, insert off a regular function points to the taste off the regular function only. Okay, so why am I telling you all of this? Well, it is very important to understand that this keyword whenever you work with huge is a soft No, we haven't started working with huge is. But as soon as we go, I'm going to mention all of these concepts on. You are definitely going to feel empowered whenever you encounter this concept over there. Okay, But just for the sake off showing you something even though we haven't started with huge is you can have a look at this green shirt on the screen. And here you can see that you should avoid using the arrow function on the view. Instance property such as the method converted property. Even the lifecycle hooks on. We're going toe encounter this when we work with if you just but but I just wanted to give you a little sneak pick off the place where we're going to use this concept. And hence I've put up this court snippet over here, and we're going to encounter this in the upcoming videos. So for this, I hope you were able to understand the basics off the skipper. Andi, thank you so much for watching this video. 8. Async Await Vs Promise : Hello, everyone on in this video, we are going to understand how they think of it before with the promises. And how can you work with the single right? OK, so I'll just explain you by example. So let me this create a file over here called us. You think of it. Okay? And you can name it, whatever you want. So first of all word I'm going to do is I'm going toe create a promise which is going to guide result after three seconds. Okay, so those three second can be any icing task in the world. Example such as an a p A call to us over which is taking some time to get the response. Okay, but here, I'm just going to make it off the set time old method which is going toe simply return the result after three seconds. So, first of all, let's create the promise. Okay, on, we're going to work with this promise. First on, as soon as we're done with the promise, then we will move one video single bit. So there you can clearly on the understand the difference between the think of it and the promises. Okay, so for stole here. I'm going to create a promise called as display message. Okay, so there's basically returns, uh, new promise, Okay. And the force argument is always result. And the 2nd 1 is Did eject Okay on. I'm goingto make use off the set them up method over here, So I'm going to simply since September. Okay, so this receives a call back, so this called Big is going to run after three seconds. OK, so here we specify their timing milliseconds, hands 3000. So here I am going to simply it is all the promise. Okay, So I'll resolve with a message which we will get as a parameter toe this particular function. Okay, let me to speak straight over here. Now, The way you can simply work with the promise is by calling this function okay on, you will get it, then call back. Okay. On inside of that called callback, you will get the dessert as soon as this promise is fulfilled. Okay, So, in this desert, let us simply console log this popular dessert. Okay, on as far as the pedometer is concerned, let me just simply pass. Hello. Okay. So hopefully this makes sense. Now let me open up terminal that I'm going to simply say north unsinkable torches. So you will see it right? After three second, we will get out of my search. We just Hello? Okay, as you can see now let's assume that we want to bring more message. Let's say we want to make more vehicles, OK? Once we have this result. Okay, So the idea is to only make another promise, Saul, when the 1st 1 is the result. So the way you can do it is by running your task in this call back only, OK, right. If you do anything right after this, it is going toe ground radar. We write, for example, let me just simply print any log and let me just employed on this file, okay? So, as you can see, this is printed right over here, because this task is running a synchronously on. This is the callback which is executed when this task is done. Executing right? So when you took put our second card in this call back only Okay, so here I'm going to simply say again, display message. And this time I'm going to pass death. Okay? so again we will get it, then called back. And then again, we'll get the dessert. Okay, so here also, I'm going to simply console log the results. OK, on in sort of this call back. I'm going to make another call to this function. Okay on. Let me to simply the messages Wassup on. We'll get the results over here. OK, so now what will happen is first of all this promise with lexical on after three seconds will get the hello. Then again after three seconds, will get did there. Okay. And then I'll get after three seconds, we'll get the What's up. OK, so let's just try to on this now. Right? So we got all of this three message, OK, But the problem with this is that we are basically and bringing to the callback help problem. Okay, on this is one of the biggest problem when working with a singleness task in javascript. Okay, so you end up being in called back. Hell, right. So let's say you have five more calls, right? So just imagine what kind Of course it would look like, right. And if any of the promised fails, then we need to up, like catch, block, toe each and every promise. Right? Because we never know which promises going to get rejected. Right. So what do we need to do is we need to apply catch block. Okay, which receives the other object. Okay. And we need to bring this era right over here. Okay, ATM. It'll do this for each and every promise called. Right? So let me this cop it is pasted over here and be stirred over here as well. Right? So now you can see that how are court is looking? It is basically ended up in the callback. Hell, right. So this is not a reliable court. Okay, so the a think of it, keyword basically allows you to work with the promises on it makes your court more readable by making your court look very cynical nuts. Okay, so this is off course looking isn't gonna score right, because we have a lot of call backs over here, but like to see how can you work with the think of it on, do the same thing over here. Ok, bring the same message is okay. So remember that the thing of it works with the promises only. Okay, so first of all, I'm going to create a function. Okay, so for example Const my function. Okay, on in this function, I'm going to call this promise display. Miss it. Okay, so the way you can call the promise with the single bit keyword is by first awful writing the overt keyword. Okay. And then you need to specify your promise, which is display message. Okay, on off course it is expecting an argument. So I'm going to pass the hello as well. Okay on. Always remember there to make use off off key word. Your function. It's to be a sink. OK, so wherever you're writing the await cable, your function, it's to basing. So I'm going toe four days. Think people over here, okay? And I can simply get the result were here like this. Okay. In fact, what I'm going to do, I'm going to declare of it. Results over here, which is going to be empty. String is off. Now on. I just get saying this result of this particular variable. Okay? Now, what I need to do is simply again called the display message, okay? And just passing the my sister I want to pass. So here this time I want to pass there. Okay? And I can again simply assigned the desert. So this particular variable Okay, on again, I can do the same thing with numerous activities. Wassup. Okay, now important thing to note here is that this is in call Will only exclude once this is fulfilled. Okay, so that's the beauty about the thing of it. So the of it is actually going toe stop the control flow moving forward until and unless this particular promise is either results or reject. So that is the most important thing about the thing of it. Hence we don't end up in the callbacks, right? Because this is basically waiting until and unless this problem promises resort. Okay, so are controlled flow is not going to move forward. And let me add the console log over here so that you can see properly the sequence off execution. So here I bring the result over here. Simply copy this, print it again and print it again. Okay. And let me simply command the promise out so that you can, of course, see properly. So let me to save this on alleged gold with their terminal. Okay, clearly console and run this file. Okay? And I think I forgot to call this function. So let me just simply call dysfunction as well. Over here at the bottom. Now, on this file on hit. Enter. So let's see, What do we get? We got the result as hello for civil over here, then regard there. And finally we got B. What's up? Okay, now you can yourself compare the court difference it brings when we woke the promise. And when we work with the think of it, this court is extremely straightforward and readable to the developers as compared to this one. Okay, so you can imagine how easy and efficient it is to work with these. Think of it. Keyboard rather than the promises. Okay, on. Even if we talk about the error handling, it is so much better in case of a single bit as compared toa the promises. As you can see here, I have to apply the catch block to each and every promises, right? Okay. The reason is that any off this promise can get rejected, right, But in case office innovate, the overhead keyword throws theater as an exception whenever this promise is rejected. Okay, so what you can do is you can handle the exception using just single try gets block. Okay, so let me show you what it looks like. So let me. I did write gets blocked as well on. All I need to do is simply bring theater over here in the console log. Okay, so let me just do it on. Let me just take everything from here, okay? And pasted over here. So now if any off this promise is rejected, then it can be simply handled over here in this sketch block. OK? So as you can see how good your core looks, my new work videos Think of it as compared to the promises. Okay? And let just even try. Do it on a scenario to show you the other case. So let me just come in this out. So let me this even show you an example how this cage block will be executed. So let's on this particular promise My number divorce up messages saying we need to basically reject the promise. So here I can simply say if the message is required. So what's up then? simply rejected on Simply Say something. I went, but all okay on here are also I'm going to our didn't statement so that the court blocks is not executed for that. Okay, so let's investigate this large garbage terminal on dry road on this file. So you will see that force will get the hello message. Then they there, And as Souness divorce up, our task is as executed will get there. Says you can see we got there on it is here in the something went wrong. Okay? And we're able to do this bites in playing a single catch block, okay? And in case of promise, we had top like, edge block to each and every promise called. Okay. And one more thing I would like to tell you about the think of it. Keep it. Is that the await keyword off course expects the promise. Okay, so in our case, it is returning a promise. So it is working. Fine. Okay. So you can apply the over a keyboard on Lee to do two things. The 1st 1 is if you're function, is returning a promise which in our case, it is doing ok. So the display messages returning a promise or your function should be facing function if it is in order turning a promise. Okay, So remember these two cases, Either your function is returning a promise or your function is an amazing function. So let me show you by example. So let me There's declared a function over here quoted as greetings on, let me make this function as a sink. Okay? On it is going to simply return, for example. Hey. Okay. So now I can apply the await keyword toe this getting function because it has these in keyboard with it. Okay? And remember, I just told you right now that either the function has student and a promise or it has to be anything function. Okay, so let's just rightto apply the await keyword. So this greeting function okay on, let me simply get the result here and let me even consume lobby. So now I'm going to execute this. But before that, let me just simply him comment about this court blocks so that we don't get any sort off Better. Remember, this particular promise is executed. Okay, So that means this Corby, their dominant on on this fight, says agency regard the hey my sexual here, which is printed over here, right? So now let's understand what special difference does the ace in keyword makes to a normal function. So animal you apply is in keyword to a normal function, and it returns the value than this value is not return as a simple value. Instead, this value is returned as a promise. Okay, so what it will do is it will try to always result this particular value as a promise. And that's the reason why you are able to apply the overt keyword on the matter of the fact is, if you are using this hazing function, then you can also simply say great things. I thought. Then you can apply, then over here. Okay, so the reason you can do it is because this is basically resolving as a promise. Implicitly, you are not able to see it. But the Zinke what is doing that? Okay, so let me one show You Okay? So I'm going to simply quickly console log the reserved over here. Okay, Now let me go to their dominant and run this file. So as you can see regard the value right away. So there is. This was all over these. Think of it. Keyboard on. I hope you were able to understand this on. Thank you so much for watching this video. 9. Getting started with Vue JS: Creating Vue App: Hello, driven. And in this video, let's understand, how can you create the view just up on get started? So, first of all, here, I'm going to create our next artist email fight. Okay, so first of all, I'm going toe, create some samel boilerplate. So if you're on the Via scored, then you can simply press the exclamation key on, then tap so it will generate a stable boilerplate for you on let medicine Bleeding's their title as beauties. Basics. Okay, on what I'm going to do is first of all, I'm going to add the Syrian for the huge is so largest search for it. So you can simply serves four view Jay Syrian on you will get this on this particular view . Just documentation. Okay, so here we will basically find their to sit in. The 1st 1 includes the latest version of the villages, and the 2nd 1 is the specific version. Okay, so I'm going to copy this one on go to the court base, and here I'm going to add this particular Syrian. Okay. No, Hear them window. Simply greater. Dave. Okay. On inside of this, Steve, I can simply say welcome to you're Jess. Okay, so now let's spread on this in the browser. So not good on this particular file on the local host server, I'm going to make use often Extension in the school called his life's work. OK, so if you don't have this over than you can simply install it. So what it allows you to do is my memory. Go to your estimate file. You can right click on it and you can open with the life's over. So as you can see, it has opened for me already. Okay, so now let me open up terminal so that if there is some African say it. So, as you can say, they're saying you are running, leave you just in development more. That means it is running totally fine. Now, let's see. How do you simply attacked this estimable toe? The view just instance. Okay. And if I do anything dynamic over here, such as making use of the welcome Liberace is which is also known as moustache. And if I put any sort of expression over here such as one plus one, there is nothing going to happen over here. It is simply going to treat this as a string. OK, so here, just below the body, I'm going to add a script tag. Okay. And instead of this script, I I'm going to create a new view instance. And in this view, instance I'm going to pass an element property, which expects idea off the dome element on which you want to attach this view instance Two . Okay, so let me just give it I d off. Luke. Okay. I'm going to simply at this particular idea over here, Okay? And as soon as I say this, you will see that this expression is evaluated. That means the view instance is now available. So this particular day, Okay, again, this room instance will not be accessible outside of this, Steve, forget. So if I based this over here, as you can see, it is simply treated as in a string. OK? No. So let's try to do more things such as there Is this another property available Caldas data . Okay. Nor based data can be object as well. Okay. And it can be a function as well. So let me show you both. So if you're using this as an object, you can simply are declare the variables, for your view. Instance that that you can access insert off this particular it's demon, right? So, for example, if I declare the title as and I'm going to simply copy this title from here, Okay? I have minimal disassemble. I'm going to paste it. So now you reference this particular title again, I'm going to make use off the diabolical Liberace's syntax, which is also known as most as syntax. Okay, so it against regard this title over here in the estimate. Okay, Now, one more way to declare this data property is by declaring a function instead of the object . So let's see, How can we do that? So here I am, going to simply declared a function. Okay, on inside of this, I'm going to return the object. Okay, so this is also one off TV on. As you can see, everything is working fine in this case. Also. Okay, Now, eventually, you declare the object or venture to declare the function that's gonna live here, working inside of the route view instance. So it is fine to declare the object as well. But when you work with the usable components, then you should use this function. Only reason is that because you're reusable, components will be used in multiple places. Insert off your application. Right. And each off. Those places should get a fresh copy off your instance. So to get a new instance, you need to declare your data variables as a function. Okay, if you'd declared it inside of the object. Okay. So if you declare your data as they object than all references off, your component is going to make use of the same data. Vegetables. Okay, hands. It is recommended to use the function whenever you're working inside of the components. Okay? And he had also were going toe are declared the function only. Okay, Now, I would like to show you one more thing. Which is the short rains in text off the function on. I will already mentioned this in the previous section. So the short rains index for the regular function works like this. You remove this function. Keyboard on remove. This column is well, okay. So as you can see, still everything is working fine on you don't see any sort of edit over here. Okay? And this short and functions in tax is a feature of JavaScript. Okay? It has nothing to do with the huge is Okay. So whenever you see ah, function like this in sort of the object, just assume that it is equivalent to this. Okay. On inv users, you will mostly see the function declared instead of the object in a short envy. Okay, like this. So, guys, this was just a basic overview off. How can you get started with the huge is creative, Eunice tins on access the data variables in your template. Okay, so I hope you were able to follow along. And thank you so much for watching this video. 10. Two way data binding using v-model: Hello, everyone on in this video, we're going to talk about the tour data binding in villages so you can achieve the tour data mining in the huge is using the the moderate directive. Okay, so let's first understand what is to wear data binding. Okay, so too were date of ending the first tour concept where if you make changes here, anything in the steamer, okay? And if it has a remodeler Thibaut it is going to reflect in your view instance. And if anything changes in your view, instance it is going to reflect in your viewers were looking so that's the door with a demanding in this simplest form. Now, let's understand how can we practically do it? So here, I'm going to add an input bag over here, okay? And in this import, I would like to add of immortal. Okay. And here I would like to Ah, for example, assigned the remodel toe one data variable, for example, magnetic letters over here. So here I am going to other Toto, we're just initially going to be I'm district. So let me a sculptor this and pasted over here. Okay, on. Let me also aired the label for this Trudeau's I'll say enter total. Okay, let me just say this. So as soon as I start typing, Okay, So the what we model will do is it will automatically listen to the events, and it will automatically update the to do, in our view, instants, solar. Just try to see. So what I'm going to do is I'm going to hear simply say edge to on here. I'm going to simply print or the toe. Okay? No, If I type anything over here, for example work. OK, so I'm intrigued to do, for example, shopping. So, as you can see, it is being reflected over here, so that means the immortal is automatically setting the new value off the to do that is coming from the events being fired from the input. Okay. And it is our dominated, citing to the view instance variable. Okay, if you were not using the model, you have to explicitly said the new value you have to basically first only certain deliverance on you have to create a my 30 in Europe, for instance, and you have to set it over there. Okay, but remodel basically does it all for you. You don't have to do anything. You have to just declare the data available on bastard in the immortal on. Do you have this store that I'm ending over here? Okay, so this was all about the two without amending. Okay, it's we're simple on. I hope you were able to follow along. And thank you so much for watching this video. 11. Conditional Rendering: Hello, everyone on in this video, we're going to understand How can you conditionally show you why in view Jizz. Okay, so there are a couple of directives that you can use to show and hide the elements from the U. S. Okay, so let's have a look at each of them one by one. Okay, So for example, here we're printing the total. Right. So let me just, uh, added over here. Okay, so there you couldn't see properly. So, as you can see, as soon as we're typing, we're showing this true. Okay, Now let's suppose that we want to show this total only when the length off this producer Toru is greater than let's a three. Okay, then only we want to show it. So how can we do it? So it's quite simple. All you have to do is first of all, you can add, this are the activities. And if Ok, and here you can pass the condition that should result toe a 1,000,000,000. True or false. Okay, So let's say here I'm going to simply say if the root dot lend greater than three. So let me just say this so as you can see it. Is he here? Dennis off now on dinner. Unless I type more than three characters, it is not going to show. OK, so as you can see, as soon as I rode the four character, this particular condition became true on the this particular H two appeared. Okay, now there is one more way to do it, which is by making use off the show. Insert off the if. Ok, so as you can see it again, if I enter work residency again, regard this message over here. Okay, So what? Worster difference between TV if Andi visual Ok, so let me just roll back to the VF. Okay? Andi, let me to show you what's the difference. So whenever you used TV, if what it is going to do is whenever the condition becomes false, it is completely going to remove this particular element from the dorm. OK? And when you use the V show, what it will do is it will apply the style property. So this element and that's style property will be known as this plane None. That means this element will be present in the dome. But due to us CSS style with this display non. It is going to be hidden. Okay, various in case of wave, This element is completely removed from the dorm. So let me show you by example. So for example, if I inspected over here, So as you can see here we have this edge to element. OK, so let me just increase the size so that you can see properly. As you can see, we have this edge tour here now, as soon as I reducing the murder of character. So as you can see, there is no edge to now in the dawn. Okay, Now, for example, if I used TV show attribute saved this. Okay, so let me inspect everything again. Okay? So let me inspect this again. Okay? So clearly you can see the script I right over here. Okay, so let us make this condition falls by reducing the number of characters. So as you can see again, the condition is false. But now you would see that as to its president in rhythm. And we have this additional style appeared over here, which is called this display nen. Okay, so I hope that you understand no worse, the difference we're giving the V if and we show. Okay, now, I would like to show you some other couple off directives that do you can use with it. Okay, So just like you normally attain the condition using if else if and the else block you could work similarly over here. Okay. So, for example, if this condition fails, we want to check another condition, so I can simply hearsay. Okay, so here, I'm going to say we else if, okay. And let's I want oh, check. Like, if total dot land is greater than zero, and then the road out lent it's less than equal to three. So feel then I would like to show myself such as keep going. Okay on. If both of this condition failed, then I would like to wear another court block. Okay, So here the directive I can use is simply v s okay. And I would like to hear, say that the room is empty. Okay, So let me simplicity of this. So, as you can see currently are to do is empty. So we are seeing this particular message which is coming from this block. Okay, now, as soon as I start entering something, for example, work. So we get this message, which is keep going because our Togoland is greater than zero and it is less gentry. No, As soon as I enter more character than this producer condition becomes true. And hence we see this message over here. Okay, so you guys, this was all about the traditional rendering with huge is so it was quite simple And I hope you were able to follow along. And thank you so much for watching this video. 12. v-bind directive: Hello, everyone. And in this video, we're going to understand what is V buying directive on how do we use it? Okay, so we buying directive basically allows you to bind the estimate. A tribute to your view. Instance Data variable. Okay, so let's just see this by example. So let me add one more input. Our tag over here. Okay, on. Let's say we do have this value property in the import. A great. So here, I'm going to add Devalue us. Hello there. Ok, and I'm going to say this. So, as you can see, we have this another import bag over here. And instead of this, we have this text, which is Hello there. Okay. Now, what I want to do is insert off. You know, passing the static value like this. I want to associate this value. Your data variable. Insert off my view. Instance. Okay. So, for example, I want to associate it to their title itself. Okay, So the way you can do it is by saying the hyphen buying Kahlan value. And here you have to specify that data available to which you want to associate. Okay. So for example, I'll just simply at this title Variable over here, and I'm going to save this. So as you can see now, the value of this input variable is equal in tow. This particular title right now remember that once you have minded this particular value, it rebuilt. Using the web and directive, you have to have this popular very badly defined in your of instance. If it is not found, then it is going to try them. So, for example, if I enter anything over here, OK, then it is not going to be treated as a simple spring. It it is going to throw ever because of you is going to look up. This something are variable. Insert off your view. Instance. Okay. So since it is not found, it is going to throw the other. Okay, So if you have minded this particular are directive to attribute, then remember that that variable has to be present in your view. Instance. Okay. If so now I'm going to simply roll back to a previous version on. Let's also apply another bind to another triple. So here I said, be buying. Okay. On this time I want to apply this toe disabled at three work. Okay, Okay. On first of all here, I'm going to define that particular variable show extra input. Okay. And I'm going to set it as false. Okay, on what I'm simply gonna do is on we do the friends, this particular variable over here, and I'm going to apply this not condition. Because if this is false, that means this has to be disabled. And if this is true, that means they should be shown. Okay, so let me simply say this. So as you can see now, this particular import is disabled now, okay? And if I simply make this true, Okay, so it is no. Enable again. So, you guys, this is how you can apply the blind directive toe the attributes on One important thing to remember is that there is a shortened syntax for me by looking. So whenever you're using the V buying Kahlan instead of writing this month, you can simply say, calling itself okay. So you can remove this re bind and everything is going to work properly as it is. Okay, So let me to save us and show you. OK, so if I make this fault, okay, So as you can see it is working same as before. Okay, so this is how you can work with TV by natural, built on this is alias or a shorthand syntax for the V buying directly. Okay. And going forward, we're going to use this itself. So the guys, this was all about Devi by night rebuild. And I hope you were able to follow along. And thank you so much for watching this video. 13. Event handling and Methods: Hello. Everyone on in this Really? We're going to understand How can you handle events in view jizz? So you can handle the events in view jizz by making use off the on directive. Okay, so let's just see how can we do it? So first of all time, I'm going to simply comment on this particular input variable. Okay, on, just over here, I'm going to wear doubled in, and here I am going to simply say ID. Okay, Onda, uh, let's say I want toe call in matter on the click event. Okay, So whenever this button is clicked, I want to basically call the method in sort of the view. Jay's okay? And we'll also see how can we create Dementors? So the way you can do it is by saying we hyphen on okay, then colon than the name of the event. So in this case, we want to handle the click. Ok, now, what I want to do is on the handle of this click. I've basically one toke, all of you instance method. So let's just first off already finding my third over here. So here I am going to say methods. Okay, which is an object on it is going to take the matter name. So for example, here I can simply say that to do Okay on here I can declare it like this. Okay, Are I can even use the shorthand regular functions syntax. So I'm going to them of this on the move the colon as well. Okay, so that's your regular function. Shortened Centex. So instead of this actor do I'm going toe as off? No, simply console log. A message called Less clicked. Okay, so let me just simplicity of this on what I'm going to do is here. I'm going to go there for this particular method. So here I am going to simply say add toe. Okay, so here I am going to simply click. And as you can see, we got this particular myself over here, which we just added over here. Okay, so one more thing, I will agree to lose that of animal. You're referencing your view. Instance matter like this, OK? And you are not passing any sort of arguments from your esteem ill than your method is going toe. Simply receive our default even object. Okay, if you're calling this matter from an event handler. Okay, so this event object will hold the even information. Okay, so let me just console log this as well. Okay, we're simply print this on glee cornered. So as you can see the first, it is simply console log in click. And our second consul log is they went optic itself. Okay, so we have all such information about the event itself. Okay, so now they're supposed that I also want to pass an argument. So this actor room method So let's see, how can we do it? So the way you can do it is by saying simply, let's say I'm going to pass a spring for example. Hello there. Ok, now, if I just passed this simple string object than on Lee, this is going to get past. This time, the event object won't be available. So, actually, how can you pass the event object explicitly. So here you can pass a second argument, which is dollar even. Okay, so this is available to you by the huge is in the estimate so that you can pass it to your methods. So here. Now, insert off events. I'm going to some basic data coma even. Okay, on what I'm going to do is I'm going to add another concern. Lock over here. On here. I'm going to play in the data, so there you can see properly. So let me say this. No. In fact, we can add a button. So as you can see, we go guarded data, which is hello there. Which we passed as an parameter toe. This particular matter Andi. Then we got the rent object as well, which is being logged over here. OK, so as you can see here is different object. Okay, so that's how you work with the event in villages on. One more thing I would like to show you is that there is also a short ends in texts for V on. They can simply make use off at the rate in case off the own. OK, so I'm going to remove everything from here on. I'm going to simply say at the right, let me say this and they're just try this now. So as you can see again, we have the same dessert here as well. And mostly you will see this particular shorter and syntax being used for the V own directive as well as the divine directive. Okay, so for the rebound, it was just calling. And for Vionnet, it said that its symbol. So because this was all about handling the events in the view jizz on calling your methods and defining your methods. Okay. On their own, much more event that you can handle apart from click OK, Depends on where you are applying that particular handler. Okay. But I just wanted to give you an example. Like, how can you handle it? Okay, so you guys, I hope you were able to follow along on. Thank you so much for watching this video. 14. List Rendering: Hello, Ruin on in this video, we're going to understand how can you render the list in villages? So here we are, basically trying to get the user to adduce. Okay, So let's just do one thing. Whenever user enter their toe on click on add, let's added to a list and then we'll render their list to the U. S. So first of all here, I'm going to simply create or did available pitches in a hurry. OK, so here as a to do list as an empty area and here work, I'll does inside of this act rudimentary. I'm just going to simply their friends this matter over here, OK, I'm not going to pass anything because we'll be able to get their total from this data variable with the studio itself. So I never This pretty little method is called, which is at total. What I'm going to do is first of all, doing everything from here. Okay, I'm willing this implicit this dot to do list Dart bush, and here I'm going to push this start to do. Okay, so I'm able to access this data variable using the this keyword on simply this started. Okay, So that's how you access your view. Instance really well, which is by using this keyword. Okay, so let me say this on. Let me wouldn't try toe brain the list here in the console so that we can see if we are able to push the total to the list. OK, so I did this dot to list, So instead, this start, cruelest. Okay, let me say this. And for his only finder work. All right, as you can see it. Is that it over here? If I had, for example, in shopping, as you can see, it decided over here. So now let's see, How can we basically render this list on onto the US? Okay, So what I'm simply gonna do is let's go over here. Okay, on, Just below this, I'm going to add an another list, okay? And insert off this, I'll have released. Right. Um and we basically want to repeat this list item. Okay, So do it right over the list in view, Jess, you can simply save the hyphen. Four. Okay, so here you can say toe in to do list. Okay? And over each attrition, you will get this toe. So Let me explain this out. So I just print the guru here. Okay, so let's just try this. No, if I say walk and click on it. So, as you can see, it is a little here on for is only five shopping and click owner. So, as you can see, it is I did over here and let's just do one more thing. We just tow clear up the current to do as soon as it is added. So here, I'm going to say this start total equals and district so they just try this once again. So I'll say work headed Then I said shopping added, for example, dinner. Add it. Okay, so we're getting this our to do list over here and let me when I had some sort off title over here so that it is easily visible, so it's a list to do. So now if I say work, as you can see, it is, I did. Now if I said, for example, shopping, as you can see, a deserted away here. Okay, on one more thing and will echo tell about day before attribute Is that along with the item in sort of the list. You also have access to the index is Well, okay. So the way you confessed the indexes by applying the Prentice's and here in the second argument you have access to the index is well, so let me just show you over here. Okay? So I'm going to paste this index on like just like it's now. So if I say walk, as you can see, we have this index over here. If I say shopping, then we have it all here. Dinner, as you can see, So we're able to fight. The index is well, so there's this was all about basically rendering the list in the view jizz, using the way for a tribute on understanding How can you treat over it? And how can you access the item as well as the index off that particular list that you're trying to a trip? Okay, So you guys, this was all about the list rendering in view jizz on. Thank you so much for watching this video 15. Dynamic Class Styling: hello. Driven on in this video. We're going to understand. How can we dynamically applied the classes and styling to other stable elements? So, for example, will pick up this particular input for dynamics telling. Okay, which is this element? Basically now, as long as they're coolant is greater than three, then we're going to show this failed, or we're going to style this field in green color. And if the coolant is less than three, then we're going to style this particular field as a radical. Okay, so let me, first of all declare to seize this class is over here at the bottom. Okay, so here, I'm going to wear this style diet. Okay? And here I am going to declare two classes, and here, first of all, I'll out of a little us. Okay. And here, I'm going to say border as three pixels, solid on light green. Okay. On for the invalid class. Okay. I'm adding one more class, which is invalid. And for this I want to give a border off three pixels. Solid on Dredd. Okay, so we have these two classes ready on. Let's see, how can we? Dynamically style are elements, so As you can see, here we have this input element on which we want to apply this particular classes. So the way you would do it is by seeing the hyphen bine colon class. Okay. No, As you know that the shorthand for the V bine is just simply Colin. So I'm going to remove this fever and from here, Okay, on here, you can either specified the object or the arrays. Well, OK, so we're going toe. See? But what the examples. So let's first start with the object. Okay? On Dhere, you can specify the name of the class in the key property on In sort of the value, you will add the logical condition on which that particular class will be applied. So let's say we want to apply developed class when the dodo dot land is greater than three . Let me say this. And if I start typing something here as you can see, our fields become basically green, okay? And it's supposed that I want to apply invalid class when they're to Rueland is less than equal to three. Let me see of this. So, as you can see currently are in port full classes right. And as soon as I start entering on as soon as I crossed the three character. As you can see, our friend becomes going now. Okay, So this is how you can apply using the object. There is one more way we just to specify idea, raise well. So let me just show you that also So with that is let's say you have three classes and you want to apply using a day. Then you can specify them as a be on. See? Okay. And if I inspect this, then you will see that these three classes will be applied. OK, so as you can see this classes are applied over here, which are a B and C. Ok, now we want to apply the valid in Malaya class. So let's see, How can we do it? So know what you want to do is we want to basically toggle between two classes. Okay, so there it will be valid or invalid. So let's see, How can you do it? So here I'm going to simply say to you dot land greater than three. Okay, so I'm going to make you soft. Ordinary operator on if it is greater than three then I want to apply developed class on. If it is less than three, then I want to apply the invalid class as simple as that. Let me say this. So as you can see currently, this input field is having the invalid class. Okay, And out for lizard Now, as soon as I entered anything better than three. Then as you can see her class, the village classes applied and our field becomes going okay for that so you can toggle within classes as well and let me do one more thing, which is to simply disabled liberty as long as they're Togoland is less than three. Because since we are showing this particular field is invalid and still if the button is clickable, then it makes no sense. OK, so I'm going to be blind and attribute called Is disabled Okay on Dhere, I'm going to simply say toe dot length is less than three. So let me see this. So, as you can see Edward and is disabled now, if I until and unless enter at least three character in my total, this button is not goingto be enabled. Okay? So as soon as I entered that I can simply starting to lose. Okay, So you guys, this was all about styling your class Dynamically. Andi, I hope you were able to follow along. And thank you so much for watching this video. 16. Computed Properties: Hello, everyone on in this video, we are going to understand border computed properties in view jizz. Okay, So the computer properties in view jays are similar to the methods, but with the difference that the computed properties are cached until and unless they're one off, their dependency is changed. So let's see. What do we mean by that? Now, a lot of people get confused between the methods and the converted properties. But I have came up with an example, and I'm sure that it will make very easy for you to understand the difference between the method and the complete property. So what I'm going to do is I'm going to add another input field over here. Okay, on. Let's apply the model to it. Okay? And I'll pass the data available as, for example, food. Okay, on. I'm going to declare this food over here. Okay, Let it be in district on. Let me say this on. Let me add the label for this particular thing, OK? On here, I'm going to simply say, and the food. Okay, let's hire the break so that we can see everything properly. So now what I'm going to do is I'm going toe move everything from here over here because it is all related toe. Now, let's suppose that we want to describe this for over here, but in a capitalized form. Okay, so, first of all, I'm going to create a method over here. Okay, so I would say get food. Okay. And in this good food, I'm going to simply say return this Start food dot to upper case because we want the food to be capitalized. Okay. And here I am goingto simply console log, get food guarded. Okay, let me say this on. What I do is I make use off this matter over here. Okay, So here, insert off the edge to attack on. Let me simply call this matter. OK, so first we are basically understanding the matter. Then we will do the same task in the computed property, so you will exactly see the difference. Okay, so let me see of this. So as you can see, we get the log, get food called because of the number of this particular temperate is rendered for the first time. This matter is called okay? No. If I ain't got anything over here in the four, for example. Mango. Okay, so you will see that this guy full is called as soon as I'm updating this food over here. Okay, So why is this happening by this particular method is called again and again as soon as I update anything over here. Okay, so the reason this is happening is because of you. Jay's basically really under the component whenever any off the data is changed. Okay. And this is your basically state off the competent. Okay, So whenever the data is changed, huges is going to simply really under the whole company. So currently, what is being changed is the food itself, because this food is associated to this particular the model, and we are changing this particular value. Okay, so hence the temporary Israel rendered, and we are getting this method being called again and again. Okay, So let me show you once again. So, for example, here I say banana. So if you consider it has been called over here. Okay. Now, the problem with this is that let's assume that your get food is having a lot off heavy operations. Okay, Now, let's say this heavy operation depends on this food variable over here. Okay? But you only want to re compute this operation or re performed this operation, for example, upper casing. Or maybe they were seeing your food string. OK, Anything. Okay. Any sort of heavy operation that you want to do. So this method is going to get called every time, even if some other data variables are changed. Okay. Andi, you don't want to execute this thing if some other variables are changing, okay, you only want to execute this thing if only food exchange. Because this particular thing has dependency on the food data variable on Lee. OK, so for example, let me assure you, if I change anything in their total, for example, shopping you would see that again. This get for this card. And there is no need for this matter to be called right. So what is happening is as off now as soon as I met entering the toe on as soon as the view just detect the changes, it is going to render the template again. Okay, So as soon as this Tom Brady's render your my thirties called again and hence you are basically trying toe are basically executive this task which is not required, right? I don't need to capitalize Banana if blue is being updated right, Because there is no dependency on the same. But still this is getting carted. Right? So let's see, How can we solve this with the computer property? So let me show you. So I will remove this from here, Okay? And I learned another property on the view instants called us computed on, and he placed this particular method over here. Okay on. I'm going to simply reference this. Get to go here like this. There is no need to apply the parenthesis as of now, So let me simply say this on a Zinkhan. See, the get food is called only for the first time when this template is rendered. Now, if I make changes, who to root, for example, work or shopping? Okay. So you would see that we are no more getting the console logs in the computer property this time. OK, so why is this happening? Okay, so this is happening because the computer property cash devalues until and unless one off its dependencies change. Okay, so currently, this get food computed property is only dependent on this Ford variable present in this data. Okay, so on dinner, unless this food is changed, the huge is is going to cash the original value. OK, so now let's try to change the Ford Value over here. So, for example, if I enter ordinance, so as you can see, the computed property is only called when it's any off, its dependency is changed. Right? So that's the biggest difference between a matter on a computer. Property methods are called on every rear enders off your template. Various computed property are called on really under only if one over its dependency has been changed. Okay, so if you are performing a heavy operation over here, you don't want to execute the whole operation again and again if some other date are changing with it has nothing to do with your computer property. Okay, so I hope there's this was clear to you on. Thank you so much for watching this video 17. Filters: Hello, everyone on in this video, we're going to understand what our filters in villages. So for little basically allows you to format your text in the template so you can do any sort of operations. That s capitalize your our text or ordered some extra things to your existing text. Okay, so you can do any sort off operation that he warned. Okay. So, for example, here we are displaying your toes or guess alerted me to show you. Okay on. Now, what I want to do is I basically want to capitalize. This toe does using the filters. So let's see, How can we do it? So let me, first of all, remove this index. It doesn't look good on the way. So the way you can define filter is by going over here, they find a property called less filters. Okay. And again, this is an object. And here you can basically capitalize your filters. So here I am going to simply say, for example, capitalize total. Okay, so this particular filter is going to receive the value. Okay. Which will be this one itself. Okay, so now I just want to capitalize it, right? So I can simply say Britain value dot to upper case Quite him. But let me say this on the way you can apply Filter is by adding up by popular okay or a pipe symbol, and then you can specify the name of the filters. So here I want to specify kept relates to do a simple Is that so? Let me just try this now. So for example, if I read work, as you can see, it is capitalize. Let me add more to lose. All right. And one more thing I will cripple you is that this filter is not going to actually override this value off their toe by making it caps. Okay. But in fact, what it does is basically it's at the time of rendering. It basically calls this particular method, which is different. We're hearing different that on its kind off. Ah, plan That effect on Lee at the time of displaying that means they're totally over here, is holding the original value. It's only at the time off for rendering this world that is applied. Okay, so that is this was all about the filters in villages on. I hope you were able to follow along. And thank you so much for watching this video 18. Components: a load of went on in this video, we are going to understand water components on how can you create components in view jizz. Okay, so no components are a generic concept. Okay? It is not specific to view Jay's, but almost all different books. It is a huge is anger as well as the react followed this concept, which is basically to split all of your cord into components. Okay, so why don't we do this? Why do we create company? So components are basically reusable pieces that you can use at multiple places. Cross your application to let me to show you by example. So, for example, here we are basically showing the list of to do's okay. No, For example, I want toe no larger. You have four pages. Insert off your web app on in all of those four pages, you are showing this list. Okay, So instead of writing the repeated court for the list or do what you can do is you can move this particular court inside off one component and simply passed this competent on every page is right. Instead of writing the whole court for it. Okay, so, no, let's create the component for listing to does so. First of all, I'm going to come in this out from here so that even difference it later on. Let's now try toe, add the component over here. Okay, So what I'll do is for solar creative, you competent. So the way you can create the company's besting view. Dark component. Okay. And insert off this, you can festival positive name off the component. So let me call you Does cruelest. And the second perimeter is an object which can have multiple properties such as their template. Okay. And instead of their template, you can pass the template which will be rendered of individual component is rendered. Right. So in this temperate, I'll make use off the back takes. OK, so these are not normal strings. These are back picks, and this symbol can be found on the left off number one key on your keyboard. So here I am going to paste this particular template. Let Mary for my deserve it. Okay. Now, the important thing to notice here is that this particular chord is dependent on to do list . Okay, So we need somehow are mechanism toe past their to do list data toe are competent. So let's see, How can you pass the data to your competent? So basically incompetent architecture? You can pass the data so you're competent using the props. Okay. Border props. Props are basically custom attributes on your custom components. Okay, So their data basically floor downs using the custom attributes which are called as props. So let me declared a proper over here, so I'll say props. Okay, on inside of this, I can declare the name of the drop in another. So the problem let's say that we'll receive will be called less produce. Okay, on this will be nothing better to do list. So it read over this? Okay, on. Let me just implicit this. Now what? I Lewis here. I'm going toe Add the to do list competent. Here. I'll sit. Did he list? OK, so let me say this Now Let me open up the console on. As you can see here is this error it say's component template should content only exactly one group element. Ok, so that's an important thing whenever you work with the confident. Okay, So the template off your component should have only one route element That means you cannot have this to element side by side on the RUC level. What you can do is you can grab this around in a single element, OK? And that can be anything here. I'm going to simply rep it around. Okay, so that middle simply wrap this. Okay, Ana, let me for my disobey it and let me say this. And as you can see, this error is gone and our list Trudeau component is actually rendered OK? And although we won't be able to get their toe item in their to do list because we're not passing their toes using the prop insert off this to do list component. Okay. So let me just right where this Okay, so as you can see, it is not visible over here. So as I told you before, that you can pass data to the competent using custom attributes which are known as props. OK, so as you can see, this component is receiving the props using Trudeau's. So I'm going to add this custom attribute over here. Okay, Now what I'm simply going to do is I'm going toe buying this particular to lose do the cruelest which is present over here in the road component. Okay, As you can see now to buying your data to the custom that stimulate rebuild, mate, you can make use off the hyphen. Bine colon. Okay. And now you know the short instant text, right? Which is to simply used the colon in. Start off writing the whole V. Brian Colon. Okay, so let me say this, and let's try to do it now. So if I say walk, as you can see, it is at it over here, where we have some warning over here. It says failed to diesel filter capitalized produce. Okay, so there is investigating. This error is because alert this template was present in this room. Template on. We had different that over here. But now, since we have moved it coolest part in aceptar competent, we need to define it's dedicated for a little over here. Okay, in this competent. So let's see. How can you do it? So after December, I can simply say filters. Okay, on this is going to be an object. And I'm going to simply copy this capitalist through the filter on. I'm going toe baster door here. Okay, Let me say this and it should work. Find out. So if I had work Greek honored as agency, we have this list to do. Shown over here on this to do list is passed using this props which is defined over here in this competent and which is being it raided over here. Okay, on we have this are dedicated freedom for this component itself. Okay, let me try to add more. It was over here, so as you can see, it is working completely fine. Now, I would like to show you one more way to write a story a competent. So the way we have currently registered our custom component is known as global registration because we have simply they started this competent on the view instance itself . Now let's say you want to make a component available only to those places where it is explicitly mentioned instead off making it globally available just like this to do list component. So let's see, How can you raced through the company locally, So it's quite simple, but let me first commend this out, okay? And all you have to do is declare an object. So here I'm going to simply say, Let my the rule list component, okay? And it is going to an object on. I'm just going to simply copy this on Bay Street over here. Okay. Okay. So currently, we are getting the center because we have commented this out. Now, what I'm gonna do is until they start this competent, I'm going to take this object. And here, in this view, instance I can simply say components. Okay, which will be an object. And here, inside of this, you can study it competent. So here I'll say through hyphen list. And I will pass this object over here on. Let me say this. And as you can see, everything is working. Fine. Now also. So let me just try this. So is against it is working perfectly fine. Okay, So this is how you basically are. Do it. Okay. So here, let me simply come in also. So here I'll say local registration on Dhere. I'll see global component, the discretion. Okay on. Let me just component here is with Okay, so there is. This was all about race during the component in the view jizz globally as well as locally. Okay. Thank you so much for watching this video 19. Lifecycle Hooks: Hello. Driven on in this. Really? I want to talk about some of the life cycle hooks on that you get in the view jizz. So, as you can see here is the official documentation for the same, which you can find it on. Eugene Start are okay on as you can see, as soon as you create a new view. Instance. Then first of all, your events and the life cycles are in its latest on you Get this before, create hook. Okay? And as soon as all your injection and everything is initialized, then you will get this created hook over here. Okay, then. Dave, you just took some couple of evolution such as it looks for whether it hasn't yield property with this element property. Okay, this one. Okay, so it basically takes whether it is president or not. Okay, so here it is, basically taking how your review instances set up. OK, so if e l is not president than it is looking for, this moment matter, OK? And if it is present, then it will check whether it has a temper. Adoption? Not Okay. So ultimately comes down over here. Okay? When it is ready for mounting. But before mounting, you will get another who called this before month. And once your component is mounted, then you will get this. Who called us? Mounted. Okay. And as I told you before that as soon as you're touching this, insert off your data variables than your component is really rendered. Okay, on before it is really rendered, you will get in life cycle hook called us before operate, and as soon as it is rendered, then you will get this life cycle. Who called us updated. And there are two other life circle hooks available which are before destroy and destroyed . So this will be called just before your component is about to destroy. On this will be called when you're component is basically display. So now let's see, how can you implement this lifecycle hook in your view, instance. So in your view, instance you can simply access this lifecycle hook, which are available as a method. So here I am going to simply placed all the lifecycle hook. Okay. As you can see, here are all of them which are before create, created before mount mounted before update operated before destroy and destroyed. Okay, So all of these lexical hooks are available as it mattered over here. And let's try to say this and then this now, so I'll go over here. And as you can see, we have these logs over here so that we can see properly in watch sequence. This lifecycle hooks are triggered so far, so you can see we have this before create. Then we have created Okay, then we have before month and then we have mounted. Okay? No, If you're wondering, when will this operated or the before update or before destroying? Destroyed will be called. So the update and the before the bread will be called when? Any off your instance data variable changes. Okay, so I already mentioned you before that whenever are your instance visible changes? Your component is really wondered. OK, and it is even shown in this diagram that whenever your data changes, your template is resented, okay? And you get this to lifecycle Hooks. So let me change anything over here, for example, Total, which is associated with this input element. So if I enter anything over here, you would see that we have this life several hooks that are being triggered, which are before a great and operated. OK, so now let's also see when will it be before destroy and they're destroyed. Hooks will be called So they will be called as soon as you call the Are destroy method on your view Instance. So let me just go over here on. I just assigned this tour variable. Okay? And here I am going to simply say, whenever our component is updated. Okay, let me simply call dollar destroy. Okay, so let's try this. No, No, As Souness, this abraded lifecycle Hope will be called were basically calling the destroy mentor. And after that, nothing will work as far as the view functionally these concerns. So let me under something over here. So, as you can see, we have this operated on. We have this before, destroying their destroy hooks executed. Now, if I under anything over here, nothing off the view functionality is going to run until unless I refresh the new instance . And again, if I enter anything and as you can see this toe destroying the before destroy our card on our view instance is completely destroyed. Okay, so I guess this was all about the life cycle companies, and I hope you were able to follow along. And thank you so much for watching this video. 20. 'this' keyword in Vue Instance: Hello, everyone on in this video, we're going to talk about the this keyword in view instance. Okay. No, Before watching this video, I'm assuming that you have watched my this keyword video in the previous section. Okay? And if you haven't wanted, then I highly recommend you check that really old first. And before continuing with this. Pretty OK, so in that video, we talked about how this keyboard works with the view instance. Okay, So I basically told you that the conclusion off that video was that never had ever tried to use the arrow function on the view instance matters completed properties, fritters and even the lifecycle hooks. Okay, so let Jesse know why we shouldn't use it, because we had, in the view instance now. So, for example, as authorities, a regular function. So let me console log the ski world over here. Okay, so I said this coma this Okay on. Let me see if this notify add anything from here, okay. And if I click on it So as you can see, this is the log. And currently that this keyword is pointing to the view instance Okay, on, Hence variable. Go fetch. Devalue such as Title Trudeau's or cruelly says, Well, okay, what if I make this function and arrow function? Okay. And then we will see what's the value of this sort of make this cell function? I'm going to simply add the fact that operate over here. Okay? And now, if I simply click on hard, then as you can see, there are some bunch of feathers. So, as you can see currently, that this keyword is pointing to the global window object and hands were getting editors because district of variables are present on the view instance, not on the global window object. And I have already explainable why this is pointing to the global, you know, object in that particular video. But again, just to tell you, this keyword basically takes devalue from the parent context. OK, so the bear in context for this particular method is the global window object. Various. When we used irregular function. Okay, let me say this. So whenever you whenever we use the regular function, the value of that this is greater mind by the owner of dysfunction. So none of this particular function is the view instance. Okay, Now let's also discuss about this special case that were discussed in that particular video . So which was when you declared an and or function insert of the method. Okay, so let's just try this interview instance now, So we have this act brutal mattered away here, which is a regular function. So I learned any other function over here, which is also going to be a self in working function. So I'm going to simply console log over here, for example, this this Okay on, Let me add some a strict, so that it is easily distinguishable. Let me see if this clear this up. Okay, Clear this up again and effectively cornered. Then, as you can see, if you're using this in iro function, which is present insert a regular function than this keyword pattern. Context is the same as the your regular function. Okay, so in both the guesses, this will point to the view. Instance Onley. Hence, there is no issue. Whenever you use the euro function, insert off that particular regular function, okay? And you can do this same for the computer on the filters and all sorts off method that you defined on the view instance. Okay, so you guys. This was all about the this keyword when you're working with Divya Jess on If you have watched my disk e what we do in the previous section as villas, this particular video, then you should be pretty much confident with this keyword in javascript as well as how to work with individuals. Okay, so I hope you were able to understand this. And thank you so much for watching this video. 21. Project Overview: Hello, everyone. So in this really? I just wanted to show you the application that we are going to build in this particular section. So, as you can see, here is the app that we're going to build, which is a product minutes rap. So the user can basically add the product on there is listing off. Product is well on also the status, like whether it is also struggle in stock. And you can't even operate the product by clicking on this edit button. And they lead the purpose. Well, my clinging on this debt burden. Okay, so you will see that How can you basically designed your application using the components? Okay, so here we have the harder component. Here we have I put a component list, but a component. Okay, Andi, there is also a separate update, brother component as well. So you will see that How can you are divided you into component, Okay. And how can you make them reusable? And you're also going to understand how to share the data between the competent using props and events. Okay, so that's in one of the most important concept alone. The number you are basically working with the components. Okay, on for the way, we're going to make yourself the board step view library. So we're going to see how to work with it on. We're also having the formulation here. So for example, if I click on hard product So as you can see, these are developed Asian applied and let me want try to show you by adding the particular products. So, for example, here I say new sports shoe play this $100 brand that snaky. And if I click on in stalk and click on that product And as you can see, this new product is our dead over here. Okay? And you can even update the product information by clicking on our Great Britain on. For example, if I don't feel out anything over here and click on Ok, then the model is not going to submit. So here I can enter any sort of place. For example, $200. And if I click on OK, and as against it is a bridge over here. So you will see that How do you pass the data between the competent using the props in the events on you will also understand how to maintain the application level straight on the road, competent as well. Okay, on. Also for the back. And we are basically making use off the Jason, sir. What? Which will mimic as a restaurant? Yeah. So, as you can see on the locals, 3000 slash products, we have this sort of running. So this bacilli returns their time in the form of Jason on. We also have the card ap A available on this end point. So basically, I had a big deal. It products okay on. You're going to understand How can you make the call from your huge is to the back and several. And how can you basically interact with the third party server? Okay. And you're also going to create this project using the views, Eli. So we'll see that. How can you work with it? So I guess this was the project over you on. Without any further ado, let's get started 22. Installing Vue CLI : Hello, everyone. So in this video, we are going to install the view, See? Like Okay, So views allies basically used to create the project video. Huge is on its in command line interface. So let's see, How can we install it? So there to begin work further with this pretty little. So if you visit, see light or view just are dark on. Go to get started than installation. All you have to do is simply copy this pretty good command. Go to terminal on simply pay straight on hit. Enter on my system. It is already installed, so I'm not going to install. It is off now, but one Children installing all you have to do is you can check whether the view is installed properly on your machine by taking the view version so you can simply serve you iPhone iPhone version. Okay, so as you can see on my system artistry, daughter door, toe on. Once you have installed, you will also see some regional on your machine as well. Okay, So is this was all about installing the views a lie on. We're going to work with this in the upcoming videos. So thank you so much for watching this video 23. Creating/Setting up App with Vue CLI: Hello, everyone. So in this video, we're going to understand how can you create the view project using the views they like? So all you have to do is simply it on this going with his view, great on the name of the project. So let's say I want to name my project as my view. Okay, so it will ask a bunch off options that you have to choose. OK, so if you're running for the first time, most probably you will not see this my desperate shirt because that's my own custom blizzard that I've created the meaning to option that you will see other default, which uses the Bible in the years later. Then you can manually select the features so it's off now I'll say, like their default. And in the upcoming videos, we're going to work with the manual is electric features as well, But it's off now. I'll see like the default one, and as soon as you hit enter it is going to initialize folder in which it will large under all the farthest necessary for you to work with. The beauty is okay on as soon as you discomfited, I'll get back to you. Okay. So as you can see, it has created the folder called Is My View Up. So I just simply move into this particular folder. Okay, so I go into this folder, Onda, and all I have to do is simply run this command to start up this over. We just npm run. So So this will spin up our developments over for you, which is hard, real ordered. That means anything. Just you making the cord ways will be reflected on the fly. So let me just simply open this so open this. You can simply copy this link. OK? Andi will go to your browser and placed it over here. So is again CR app is running. Okay, It sends started boilerplate. So you guys, this was all of articulating the project, using the views ally and speeding up this over. Okay, so I hope you were able to follow along. And thank you so much for watching this for you. 24. Project Structure: Hello, Ruin. In this video, we're going to have a look at the project Structural for replication. So I'll open up the court base in Ah, the escort, but an in court space Dark. So, as you can see, these are the files there doesn't returned by the view. See, like so the 1st 1 is your public folder in sort of this. You have your index strategist email. So this is your route? They were all yours Up components are injected. Okay? And that's automatically done by the views he like. Then if we go into the SRC folder, then here you have these, First of all, on me and Georgie s. Okay, So this is the file where your application is bored strap. So as you can see your debts creating a new view instance as we did in the previous section Onda it is basically looking for live with an idea off. Okay, on it is basically president over here in the next door. Estimated that I just showed you okay. Ah, lot of people get confused with the idea off app with the AB Broadview file. Ok, so as you can see in the main door just They have included this abduct view as well. Okay, so if you go into the outdoor view, they have given the ideas I d equals up. But this is not the idea where Europe is getting mounted. Okay? It is getting mounted over here. In the end, extra testimony live. OK, so that's one thing on. As you can see, it is basically the and during this route component, which is your app dot view. Okay, so if we go into this abduct view, it is basically showing up. Ah, hello World Company, which is present in this components for Okay, So this is how you define the component in the huge is you have your template back. OK, so this is an estimate specific tag northern your specific. Okay. And instead of this, we can have as many elements as we want. And here you have your script back. OK, so it is basically defining the name of the component on props as well, which is being received by this particular component. And you have your story attack. Okay, there's this style is applied to this component. Okay, You can add a scoped attribute toe this style tag which means that this style is only going toe apply toe this competent. Okay. So, for example, if you use the ETS to retake anywhere else in other component, this margin and everything will not be applied over there. Okay, it is limited. So this particular component only Okay. And then you also have your assert folder where you can place your strategy answered, such as locals, images, spectra. Okay, on. If we go down over here, then we have a bubble conflict file. Okay? And if you're not aware about the babble, babble is usedto transpired your latest javascript cord into the older versions, which the browser understand? Okay. So that you can use the latest, which are off the year, six years, seven and so on. Okay, then you have your normal pickets Georgeson file, where you have some of the scripts defined. Okay, so Force One is the self script, which we usually Singley to start a Passover and came around. So So it is basically using the view. See less service on it runs this self common. Then you have the bill as well. So whenever you're done with building your application, you condone this command So what it will do is it will be silly compiled on all your court into a bundle JavaScript code which you conserve on any server. Okay, then you have linked as well. So lending is basically usedto check your court for mating whether it is formatted properly with inter nations and all. So it basically have a bunch of rules if you don't follow them than it is going to give you the warning. Okay, Onda, As you can see, it is defined over here in the escalating conflict. So it is making use off this custom view. Yes, lentils as well as the years Lynn recommended. Okay. And if you want to customize any of the rules, then you can write it over here, which we're going to do in the upcoming videos. So there, surely. Excellent. So you guys, this was all about the project structure on. I hope you were able to understand, and it's quite simple and straightforward on Thank you so much for watching this video 25. Integrating Bootstrap Vue : Hello, everyone. So in this video, we're going to add the bootstrap library specifically designed for the huge is so it's cardboard. Strive you. So let me just show you. So if you saw his for both of you, it will be the first link. So, as you can see would strap hyphen view gorgeous dot org. Now, if Italy can get started button, then it will basically show you how can you install it? So I'll just copy this command from here, which is in game stall, would serve you and would step and we actually donate the view. So let me just go to a terminal patient over here and we don't need the view because there is already installed on just heard in tow. And as soon as it is done installing that, what we need to do is when it toe basically important. Butch of you, from the butch of you on minuto pass it on, leave. You don't use matter. OK, so let's wait for it to install. So as you can see, it is installed properly. Now all I have to do is simply equal political base. On First of all, important, Abe would save you from the bootstrap view. Okay, Andan, What you can do is you can simply use this command your daughter use and possible shop. So here, I'm going to do the same. So once you're done with this, then all you have to do is simply import the CSS files. OK, That's the last thing that you need to do. So simply copies on Bay Street over here as well. Okay, so this is all unit. Don't Basile include the boots of you? So just protest it. Let's rightto at any sort of bootstrap component. So I'll go to the components over here on. Let's say for the burden, I'm going to make use off the's board. Separate and luminous. Copy all of this on. Let's go to the court base on Let's, for example, in the Abdullah view. Start off you logo alleged display all of this burden. Okay, let me just former this properly save this on global Terminal and start this over using and came down so on. We should see all of this burden properly. Okay. Just like we see in the bootstrap. So, like this ever start. So as you can see this always started on. Let me just call the brother. So as you can see now we have the bootstrap you I that we wanted to get. Okay, so there is. This was all about signable chapter. Your project on get so much for watching this video. 26. App Header Component: Hello, everyone. So in this video, we're going to add the head off our application. But first of all, let me just simply clean up the existing app so that we don't have this boilerplate over here. So I just go to the court. Based on First of all, remove this hello world company itself. Remove the importance Well on removed from here is well okay, Andi. Now, since we haven't moved its reference, we can all relate it. So I'll go to the competence on simply delayed this particular company itself. Okay, Now let me remove this Dave off Button says will no longer required on here. I can simply say welcome toe view chairs, okay. And I'll also remove all sort off styling from here is well, so let me just say this and go to the browser residency. Here is the simple clear message will come to a huge is that has been displayed over here. Ok, so now let's start making the header. So first of all, I'll go to the board, strive you website. Okay. On there we will basically look for the never bar so I'll just go to the components on if I scroll down over here, then you will see this never. But over here, and as you can see here, is the there, but that we need along with its core. So, no, I am going to simply copy all of this on I'm goingto pay straight in the interview component. So now let's started reading the header component. So first, all I'll go to the Components folder and create a new file called us App Herder Northview. So first of all, here I create the Templar tag. Okay, Instead of this, we will place the estimate for this appetite. Then I'm going to add descript, okay? And in sort of this, I can say export differed on. It is going to be empty is off now because we're not adding any sort of logic over here. And then we have this style attack towards any sort of styling to this harder component. Okay, Okay. So, no, let me pays. They never bar bootstrap estimate that we just copied. Okay, So as against you have pasted over here and make sure your pastry denouncing a little element. As you can see, we have this single root element of it. Is Dave over here. So let me just try toe First of all, intent this properly. So now here, I'm going to get rid off some of the things that are not required. So first of all, I'll get rid off this this particular company itself. And I think we don't even need this now. Items off now, so I'll remove their days. Well, okay. On what I would always for deviant, I'm going to make use off the success. Okay, so it will choose the green color there, send bold steps, excess color. Okay. And instead of the near what I will say product managers, because there's there were going to build. That's our f title on. I think the best looks fine. So it's off now. We have just simply created the apart component. Now, let's see, how can you include this in your abductee? So, first of all, you have to fight to this competent, so you can say import AP head of from dot, slash component, slash Have header dot View on dhere. You have to specify this component so you can say components. It will be an object. And here you can simply the app headed. Okay, So this is equal in tow. Headed. Okay, so there's any year Six Peter we're in. If you have the same key and the same value, you can simply rep it like this. Okay, so remember that this particular thing is equivalent to this. Okay, so we have included the happier. Now, let's see. How can we use it? So here I am, windows in clear, day apart. So I'll tap. Okay on Yet that sick. Now, let's see. How does it look in the browser? So they don't see if this Now, let's go to the browser. So as you can see, this is how it looks. So you always This was all about the app Harder on. I hope you were able to follow along. And thank you so much for watching this video. 27. Setting up App Layout: Hello, everyone. So, in this really over, you're going to design the basically out off our application. Okay, so we want to have a us like we have this ad product component on the left, inside and less product competent on the right inside. So you guys, let's start designing it. So I'm going to get rid of this particular message from here, So I'm just going to remove this on festival. I'm going to make use off the bootstrap container. Okay. So that I can make use of the great system with there was in the columns. So festival here, I'll declare the board several. Okay. And here, I'll give it a close off. Justify condiment send up. Okay, on in sort of this, I'm going toe have our do calm parents. Basically, the Force one will be at product, and the 2nd 1 will be least products. So here, I'm going to create those toe component. So he let me create a file called us at Product Arcview and I will hear get another file called as list product, not view. Okay. And here we'll declare the template style and this cryptic. Okay, So if you're in the Viet scored. Then you can make use off this extension called as a waiter. Okay, so I highly recommend you check this out. So this extension helps you in ST text highlighting. It also gives you some sort off snippets called for mating and everything. So you can make use off this, simply install this. And once you have this, you can simply here say scaffold. And here, tab. So they considered has generated this boilerplate for us. And I'm going to simply copy this on the street over here as well. Okay, so we have this ad product view and the less product you over here and we want to use what of this component in the abhorred of your file? So, festival. I'm going to import this over here, so I'll say import ID product from confident slash add product, Northview. And then I want to also have this product from components slash less product. Dark view. Okay. And I have this habit off adding the semi colons, but it's not required in view, but released Totally yours choice. How do you want to work with it? Okay, so now here in the components, I'm going to include these two components as well. So I also add product Acela's they this product. OK, so here, first of all, I'll add the art product. So I'll say I had product Okay on. I'm going to add the list product as well. So here I am going to simply say list product. Okay? Yeah. Now, here in the Eid product, I learned a bootstrap column, okay. And I'll give it a size off Mt. Four on. I would like to also give the class off margin off three. So what it will do is it will take the margin from top bottom left and right as well. Now, instead of this board step column, I would like to have an card. Okay, so if you go here in the bush components and search for the card, you will get the basically cord for how you can write the card. Okay. So, as you can see, here is the card. So again, simply copies on basted over here. Okay, on. First of all, let me in former days properly. So here's what I'm going to do is I'm going to remove some of the attributes that are not required, So let me just remove all of them on here. I just simply make yourself the head of a tribute on here as the ad product. Okay, I removed this text is well, and let me just properly and during this as well. Okay, on what I lose. Just copy this on Bay Street Over here, in the less product visible. So although we are not working on the list products off now but still, I'm adding it so that you can see the, um, properly. So here l c less product. So let me see if this and let's see. How does the u I look now? So I'll just say this and let's go to the brother. So, as you can see, this is how are you? I looks on That looks pretty good. And I would like to remove this person from the list product card because it is not required. The burden is not required over here. Very in in gets off at product, we will be adding the form toe basically, at the product hands, it will be required. So let me just remove this this product from Burton on in case off at product, let me just collard. Simply add product. Okay, let me say this logical to the brother now, so Yeah, this looks good. And you guys, this was all about setting up the basically out on. Thank you so much for watching this video. 28. Add Product Form UI: Hello. Driven. So in this video, we're going to add the ad product form so that users can and other details on D product. So first of all, I'm going to add the bootstrap from component on inside of that devil at devious farm groups. Okay, so let me just go to the court, A base on the move, this car text instead of this, I'm going to make use off the board step card body on inside of this, I can simply say bold step for okay. I'll give it a two bit off or to complete as off so that there is no some or disposition, minimal user friends up deformed. And instead of this, I'm going to make use of the form group. So let's just see how can you use this? So if you go to the would serve upset on search for form group, Okay. So, as you can see, here is the example of the form group. I'm going to simply copy this on going tobe a street over here. Thank you. And I'm going to remove the fittest that are not required. So just keeping the label is off now to keep the form minimalistic and simple. So here, Uh, so the first formed we want tohave is for the product name. So I'm going to simply collect name over here on for the form input. I'm going to remove this state from here as well as the remodel. We're going to create our own, remodel it in just few minutes on for the idea. I'll just call it as name. And I'll also add theater. Good. Called his name on it will be simply name. So let me see if this and actually, how does it look on the U. S. So if I go over here, as you can see, this is how it looks. Looks pretty good on for the Burton I would like to add up at We would call this block. Okay, so what it will do is it will basically expand the button, do the full space on. I'm going toe to move this. That's a tough from here. Let me to save this. Let's go over here. That looks good. Now they can debate this form group for multiple fails. So what I'm going to do is simply going to copy this on base turtle here is. But next thing we want is the price. Okay. On here, we can say we want in dollars on for the important will be placed on. Let's call The name also has place. Okay. And if you're wondering what is this tree mad rebuilt? Then it is going to remove the extra space from the start and the end on Let me the simply copies on Do the same for brand as well. So we are basically asking for the brown. Okay, let me call this Esperon on your own soil called It is burned. Next thing we want to us is the in my interest raters off that particular product. Andi, we're goingto take the input in the form off. Really? Britain's whether it is in stock or it is out of stock. So if you search for the radio but a new way. As you can see, this is how you can implement. Okay, so I'm going to simply copy. This is well on going to paste it over here. Okay, let me intend this properly on. Let me during. This is well, so here I am going to simply are the label, as in one tree Okay on, I'm going to remove the demoralize off. Now Remove it from here. Isabel were going toe Devi model to each and every form pills in just few minutes where? Let's first of all, set up the form. So for the option, when I'm going to simply say in stock and for the second, I would like to say out off Stop. Okay, Now let's devel us through here and simply fault so that we can simply no, whether the product is in stock or out of stock. So let me say this now and let's see. How does it look on the way? Okay, so this looks good. Okay. The user can enter the price name brand on the interest rate is as well. Okay, now, what we like to do is we would like to basically get the all the values of the farm field as soon as the user submitted the form. Right. So we somehow need to attach our view instance toe this form feels OK. So what I'm going to do is I'm going toe basically declare our farm object over here in their data matter. So I'm going to simply return an object over here and here. I declare the form object on this form Object will basically have different, such as name, which is going to be a district. Then we'll have the same for the price. Then we will have the same for the bronze. Last one for the Indus traders. So here, NC in reentry straightness as an industry. Okay, so now I think we should also update the name off. This really burdens. So instead of some radios, I'll call it does and when re status. Okay. All right. That looks good. OK, so now what going to do is we want to get the form field value into our view. Instance on vice versa. So what I'll do is alert eyes, Dave Immortal. That basically gives you there to wear that. They're running for the farm inputs. So here I am, going to simply out of immortal. I'll save the immortal on here. I'll call it Does form not name. Okay. Simply going to corporate this on the street over here as well. Too injured to price here. Going to say brand on Dhere in the real button. I would like to add on the boat real evidence So here I'll call it is in my entry status. Okay. Now, basically, what we want to do is on the click off this part, and we basically want to get the data. Right. So here I'll add a click listener. So here I'll say a direct link equals at product. And if you remember at Jared is a shortens and text for the on directive in views. Yes. Okay, so now we need toe Clement this matter. So just below this their time it right over here. I had my third attribute, which is going to be an object. And inside of this, I had product met her. So here, let me just simply console log. There's dot form itself. Okay, so let me just say this now on. Let's go to the browser. Now I find us something over here. For example, the name is casual shoe prizes. $100 but aren't is Nike on, for example, invent areas in stock. So if I click on add product So as you can see, we have this log over here and let's see if we get the values that we entered in the phone feels so for the ground we get developers Nikki administrators as true name s schedule chew and prices 100. So we're getting the values on, but this is what we want it. So I guess that's about it on. Thank you so much for watching this video. 29. Handling ESLint warnings: Hello, everyone. So in this cook, really? Well, I just wanted to discuss something about handling the yes lane warnings. So since we have the US led configured in our project, you might encounter some of the warnings in their terminal. Whenever you're running your views over, so let me show you. So as you can see, I'm here in their terminal, and we have this one morning over here on the yes, Lind warnings won't basically interrupt your, you know, running application. It is just going to show you the warning. That means you are not following the rules that are defined by the years, Linda. Okay, so one off such rules that were not falling here is toe not make use off the console log statements. So here you get the name of the rule that you're not falling on the corresponding at a description. Okay, on where it is happening. Okay, so the one way is to simply fix this by removing this concert lock. But in our case, we basically want to use this console. All right, so how can we deal with this particular warning? So as I told you before, that we can override the rules. Okay, so what we're going to do is we're going door at this particular rule. We just called us No Console Onda. We are going to say it don't basically check for this role looking. So let's let's see, how can we do it? So I'll go to the coordinator on I'll go to the package store, Jason file and here in the U. S. Land conflict here, instead of the rules, I'm going toe at this particular rules that I just copied, which is no console. And let me remove this record from here on for the value you can pass to values. The 1st 1 is the on, and the 2nd 1 is the off on means that this rule has to be applied or this rule has to be checked on the off value means don't check for this rule. So let me say this now. So now you can simply hurt a work their terminal on simply stop this artwork on make sure you re started again. So here I'll say in b m run So and now you will see that the years Lynn warning will be gone because you have turned off the validation for this particular yes, lent rule. Okay, so let's just go to the terminal. And as you can see, there is no warning as off now. Okay, so this was one off the way to fix the stern warning by simply turning it off globally. But let's say you want Oh, are done off the using warning for one specific file. Okay, let's say you want to apply that particular rule all over the place, but except one file. So, in that case, what you can do is you can put a special comment over here. So, for example, here we don't want this. No console warning. So just here, I can simply add a comment. Okay. On in sort of this comment, I can simply say yes. Link. Hi. Phone disable. I found the name off the roll. Okay, so in our case, it is no console a simples, that so this will also work. Okay, But remember that this is only going to work in this particular file, not all the files. Okay, If you want to turn off any of the rule globally, then make sure you do it in the conflict file. Okay? Which is over here. Okay, First simply turned it off globally. So it was. This were the two ways by which you can simply handle the yes Lynn warnings. And it's not like you should enough eat. Inevitable. Instead, if you are making any sort of mistake such as intend ation or any sort off semi colon or anything, then you should fix it. But in our case, this was an HKS. Very basically wantedto have the concern locks. So that's why I basically turned off this particular rule. Okay, so you guys, this was a quick video on the yes link. Andi, thank you so much for watching this video. 30. Add Product Form Validation: Hello, everyone. So in this video, we are going to are different mill addition to our product form. So for validating form, I'm going to make use off for library called as the validate. So if you search for it, you will get this first link. So it's in library for validating forms in villages. So let's see, How can you simply install it on? How can you work with it? Okay, so if you go here in the get started section, so what? You have to actually install the library. So let's do it. I'll just copy this command, go to the little minute. Stop this or work on. I'm going to install this library. Okay, on once that is done installing, then all we have to do is make it off this view use method in Army and RJ's file. So I'll just go to the main door days file on like this. Installed first, considers installed properly. But first we need to import it Salad with this. Copy this. Go over here on. I'm just going toe based this statement over here, then going to make it off this use matter. Okay? Already below this, So this looks good on. We're good to go with using the viability library on. Let me start this around. Now on. We should not get any sort off better, and it should work totally fine. So I just go big. It goes up on, uh, as you can see, everything is working fine. We don't have any sort off address or something. Okay, so now what we want to do is we want to basically a different tradition, right? So what you can do is if you have a look at the recommendation on if you go here in this Intacs, then the way you can basically apply devaluation is by making use off the validate direct bill. Okay, So once you add this frivolity directly, you can basically pass your validation rules, either in sort of, the strings are the object. I've prefer writing the validation rules in sort of the object, because it is more reliable, and it's basically clear, like, what sort of validation is applied? Okay, So, for example, you have the Millfield than either you can specify the village it directive like this within value off rules in the form of string out against specify here as an object. So once you specify this, we validate what violated library will do is it will basically automatically check for this validation rules and it will automatically prepare the other messages. Okay, So for example, if your field has to well, additions such as required as well as your charm ability, milk So if we violated and condos ride, your field is not required. So it is only going to store that I had a message for only required validation Will not for the email really gration rule. OK, so as you can see, it is mentioned over here only generates one message perfectly by default, but even also customize this behavior by making some custom configuration on. One more thing I would like to show you is what are the rules available? So if you go here in the validations rule so as you can see, this many roles are supported out of the box, okay, so you can use them as per unit. So let's start implementing the validates. Our first of all, what I'll do is I'll go to the cold with okay on Dhere. I'll go to the Eid product or few files on Dhere. We have videos, farm inputs, right? So I'm going to add the evaluate directly over here. So LCV high Fund, I really did on here. As I said, we're going to make it off the object. So here, first off, a lion say required a stroke on. Let's say we want to have minimum three characters in this particular field. Okay, so I lied. Mean three as well. Now I'm going to simply copies and pasted over here in the price for a lesbian. So here I still want to have the required. That's true on here. I want to have new medic feels OK, so I was in new medic as true. Okay, now let me copy this Onda let me be stirred over here in the bronze as well. Okay, so here I just keep it to require That's true. Okay? And the last one is the evidence. So I just pasted over here on here. I just implicit required. It's true. OK, So as you can see, we have added the validation on our form. Okay, but now we want to show this validation messages. Right? So the way you can do it is by simply making use off the address object that I just showed you. So for example, I want to show the other messages for the name field. So let me destroy this. So here I'll say adults north first on the name of the field. Okay on. You should have this name attribute defined on your feet. Look, that's compulsory to work with the validate library that your input field should have this name and Children. Okay, It is going to base illegal. Recognize your input, will with this attribute only. Okay, so here, I'm going to add the name. Okay, so let's see, What do we get? Large photo browser. Let's go to fresh the APP Let me open the consulate symbols so that if there is any other, then we can basically debug it. So let let me start and bring something over here. So, as you can see, as soon as I start and bring it is basically giving this validation message. It says the name feel must be at least three characters. Okay, just because we defined this over here Okay, on, if I end up with more than three character, this particular message is going okay, so As you can see, this validation is happening. Okay, So what I want to do is I want to show these validation messages when users submit the form . Okay, so I add in a tribute over here, just below this soil says, submitted and initially el sentido falls. Okay. On a soon as this ad product discard, I'll set this dark submitted equals two. Okay, now here What? I lose. I'll simply reputable. So here answered in. Sort of relive. Okay. I learned dismisses and here and say if submitted. Okay, so now let me say this now. Once I entered anything over here and somewhere deformed, then only the other Mrs will appear. So let me click on this presidency. Now we're basically seeing this other message. Okay? So, no, I would like to also add us. Yes, this class. So this particular message Okay, so basically, I want to show this text in regular. So let me just first of all, go over here on RD class. So here I'll say that hi phone message. And I basically defined this class in the road competent, abduct you so that it is applied globally. So here in this style, like I like this class on here. I'll say color are there. Okay, so let me just say this and go, Daddy Browser. Okay. On. For example, If I entered anything over here and click consummate. So as you can see, we get this proper other message in their desire to color. OK, so now let's aired this same on various other fields as well. So I'll go to the idea part of a broader view file. Okay. And here I'm going to add the other messages for other fields as well. So, for example, here I'd say price Okay on, for example, for the brand. I'm just going to put it over here. So if he had, I'd say brown on. I think the last one is this phone group. So for the farm group, I'll just based it over here. Uh, looks cooler. Does and went to restrict us. Okay, so now let me just say this code in the browser. No. If I try toe, simply submit the form without entering anything. You would see that the other messages are not displayed because even though the submitted becomes true over here, so they should be visible. But Actually, the others object are not holding their messages because the farm fields have not been touched yet. So for example, if I said anything over here, then only this validation messages appear. So let's see, How can we fix this? What we'll do is on the egg product matter. Click. I'm going to basically call of a literate method and this matter is basically provided by the view billiards. So let's see, How can we use it? So I will go to the court weighs on Dhere. I'm going to simply say this thought I'll say validated dot Really did OK on these Basically returns a promise. Okay, so it will basically give you ah bullion value better. The form is valid or not by simply learning rule falls. So work with the promise. I'm going to make yourself a think of it. So here for civil I'll store the output in a variable called result and I'll apply the await keyword to it. Ondo, make use of the await keyword. I'll make this function using okay. And I have already talked about this in covered in the previous section. So if you haven't checked that out, then please too. So here we'll get the desert. So let me the symbolic and so lock the desert over here so that you can see properly. What? Whether it is given by this particular matter. So here I would bring the dessert. Let me see if this Now, let's go to the browser. So let me click on this. So is again. See the result we get is false. And since we explicitly call devaluate method, the validation are forcefully checked without having us to explicitly touch difference. Okay, so this is how you can basically make yourself violated. Method toe basically violated all the validations that you have applied in your form. Okay? And once you enter every field correctly, then this result will become true. So they're just why this now? So, for example, for the product name, I'll say casual shoe. And as you can see, we applied the numeric check on the place. So if I entered the characters, then it says the price will be only contender numeric characters. So let me enter the numeric one. Okay on for the brand. I'll say Nike on inventory in stock. No, If I click on our product, the result should displayed rule here. So I click on this, and as you can see there is are destroyed. So this is how you can basically take this state off your from by making use of development method. So you guys, this was all about validating your forms in villages using the Louisville it'd library on. Thank you so much for watching this video. 31. Setup JSON Server - REST Endpoints: Hello. Driven. So now that we have the formal addition ready now, I think we can store the data to our database. So, basically, to have the database, I'm going to make use off the Jason server. So this distance there were basically stores. They did our energies and file on. It basically provides. You decried AP a out of the box. You don't have to do anything, So let me just show you what it is. So if you saw his for Jason said war NPM Okay, on as you can see, here it is. So all it basically need is ah, Jason filed As you can see, something like this. So first of all, you have to start it globally than it basically required. Jason, file over here. Then whenever you start the descent server with this file, it is going to basically create the credit a p a for individual teas and resource over here . So, for example, for post it will basically create the update dilate put as well as the post ap A for comments. Also, it will do the same. Okay, so let me show you. As you can see, these are the adults it will create such a slash post to get all the post slash Supposed to want to get specific post of eternity. Also, the post ap A to create a new post, and it automatically generates ready for each and every record that is entered over there. Okay, on. Put that as delayed as well. So let's try to install it is and server. So I'll just copy this common from here. Okay, on. Simply pasted over here in the terminal and on one system, it is already installed. Okay, so it is going toe. Basically do it quite fast on once you have installed this distance, sir. What? What you can do is you can head over to your project on Dhere, create a file called as baby dot Jason. Okay, on this, just one is going to hold the resources. So, for example, you born toe basically store the product. Okay, so I'm going to create products over here, and each individual product will be an object. So let me just create some dummy objects over here. So let me decide the force product. So here are the same name as, for example, casual. True. Okay, then I had another property called as price. So I'll Sergio $200 then I'm basically want tohave around as well. Then here I'll say Nike, Then here I'll have inventively status on. For example, this is out of stock. So insensitive falls on. The ideas are automatically generated by the Jason several animal. You insert the new record. But since we're skeptical, creating as off now. So let me give a tidy off one, okay? And now you create another product on Let's call it casual T shirt for the price l safe of $2. Let's say the brand is Nike as well on for the idea, and said, Okay, so let me simply say it this. And once you have this ready, all you have to do is simply head over to your terminal. Okay, on go to your Jason file. Okay, so here I go over here. So as you can see, we have the B. We don't, Jason. Over here, nor to start your distance, ever. You can simply say Jason, I found server. Then you can add a flag Caldas watch. So it is basically going toe watch. Any sort of changes on it will reflect on the fly and then you can pass your debate Georgeson on simply hit enter. So as you can see, it has created the local hosts over for you on this is the resource which is your basically addressed endpoint. And I'm going to simply copy this there to go to the brothers. And if I go over here and hit enter the residency, I got the response in the form of Jason and I'm getting all the products there. That president in my this particularly source. Okay, if I want to get some specific product and I can simply say slash for example, I can pass the idea. So if I said one, then it is only going to return. If the one If I say so, then it is only going to a little of the second product, right? And if you just do it like this, then it will give you all the products. And as I told you that it can also perform the post operation as well. So if you make a poster questo this products and point it is going to create another product and it is going to simply at this in sort of this other self. Okay, So which we're going to do in the upcoming video? We are basically going toe create a new product using our view application. So we'll send this request via ST tippy toe are rest endpoint. And it is going to basically insert that particular product inside off. This products are Okay, so there is. This was all about setting up DigiScents Edward, which will act as a resting point for a replication so that we can perform all sort of crowd operation and doing OK. So, guys, that's it for DigiScents server. Andi, thank you so much for watching this video. 32. Fetch product list from REST Endpoint: Hello, everyone. And in this video, we are going to basically fetch the data from Margie since Edward. Okay, so what we're going to do is in this Abdullah view, which is a road competent, we're going to make an A p A call to DigiScents server. Okay. And we're going to get the list off products using that A p called. So, first of all, I'm going to create a daytime it over here on this day Diameter is simply going to hold the product list. Select miss included on the object first on here I declare our product list and initially inserted toe emptier. So now what we need to do is we need to make any Baycol toward a sensor were on once we get the response minuto started in this product list so far, making the pickle I'm going to make yourself in library called us excuse. You can also make use off the fed celebrity with this native to javascript, and you don't have to stall the external libraries. But I personally before the excuse. So let me to simply go to the terminal on here. I'll simply say npm install. Excuse Andi Once it is done installing. I'm going to simply imported over here on. I'm going to make yourself this library to interact with Jason server. Okay, so later in stall, then we can push it further. So as you can see, it is installed successfully. Now, here, I can simply import this library. So it's a import ex us from excuse. Okay. And now what I'm going to do is I'm going to make use off mounted lifecycle method. So here I'll say mounted. Okay. And whenever are good component is mounted. I'm going to make him 1/3 called as get product list, OK? And I'm going to basically declared this particular method in sort of the methods object. So let me just declare the mother subject over here. Okay? On inside of this, I'm going to simply declare the get product list. Function on dysfunction is going toe basically in track vintages and server and get the greater Okay, so here I can simply say excuse dot Get Okay, so it is going to make a get request. So forced perimeters the you are a lofty endpoint and second is the configuration. So so far the u l. M. Just going to grab this. OK? So as you can see our resources running on local host 2000 slash products on you can see that on the eternal, also, as you can see So this is your base. You are very resource or rest. Endpoint is available. So there's simply copy this on Bay Street. Over here. Andi, that's it. That's all I need to pass. An excuse me. Signatory dancer. Promise. So I can make use off. They think of it. So I'll make this mansion. Issing. I'll apply the await keyword to it, and I'll get the output in the result. Variable, as you can see on what I would like to do, is I would like to wrap everything in sort of the try catch block so that if there is a matter, I can simply catch it. Okay. On Dhere in sort of the catch glove, I can simply say consoler log, end of and I can seem lipin toady and I'm going to move this instead of the try block a simple Is that on? Let me simply consume log. The result is off now so that you can see properly. So I'll say result and in fact, I'll print There is a dark data they're in. You confined itself. So let me see if this and let's go to the browser. Now on, let's go to whatever the fresh they have opened up the console as well on Let me refresh again as you conceive already have the result. But I just want to show you I'm refreshing the application. And as you can see, we have this result on we have these two products over here which are present in our David Ortiz and fight. Okay, As you can see, these other two products, they're not, in fact, okay. And we're making an AP Quarterly's privileges and several on make sure that whenever you are making an AP call yourselves running. Okay, so in one of my terminal, this or what is already running, OK, and here you can also see the locks like work. And when it was hit by different time and what sort off state escort is returned by the Jason said what? OK, so now what I'll do is since we have this desert over here, I'm going to simply added to the product list. So I said this start product list equals dessert dot data. Okay, so you guys, this was all about making in a pickle toe arrest important and fetching the data from their Okay. Now we're going to basically passed this product list toe are least product component through props. OK, so we're going to see this in the upcoming videos, and we're going to basically display all of these products inside off this particular view . Okay, so you guys, this was all about fighting the data from are resting point on. Thank you so much for watching this video. 33. Parent Child Component: Hello. Everyone on in this group, Who do? I just wanted to discuss about how the communication is done between a parent component and the child component. Okay, so whenever you are working with Lord of Components, you will end up in a case where your one component is nested inside off the other component . Okay, so if we consider the example off our own application than in our case, we have the route component as abduct for you, and it has to child components. The Force one is the product, and the 2nd 1 is the least productive. OK, so you end up making a potential relationship like this. So the question is, how do you communicate with twin dependent component and child competent? And how can you share data between those components right now? You can do it the way you want, but the best practices, basically, I suggest you toe keep your state your application state in the road company tok on from the parent competent, you basically pass your state down to your child component using the props. Okay. Props are nothing but a custom attributes that you can apply to her component on you can basically past data using those custom a tree books, right? So those are simply notice props. And if child want to communicate so dependent, then remember that it is going to basically Emmett events, right? It is not going to mutate the props that has been passed down from the parent component. Because if your child component is directly meeting to in just to your props, okay, And if that particular state are the property share to multiple components, then you will encounter inconsistency. Traore your application on anything we believe any of this state changes than parent will write the thing just made by the child component. Okay, so always make it a practice to basically passed on the props and never muted the props in the tell competent. And if you want to do any sort of changes, then you should basically Emmett events from the Chinese so dependent and no parent will basically teens that particular data or this state. Okay, so this was a quick video. Very and I just wanted to give you a basic overview. How do you communicate between opinion component and they tell component and we're going to basically implement this props in the upcoming videos, so I just wanted to give you a bit of information. So thank you so much for watching this video. 34. Passing Props to list product component: Hello. Even. And in this video, we're going to basically passed down the data from a root component to the list product component of it. So, as you can see inside off the road component, we have this critically store here. Okay, But we actually to show this product list in sort of this title competent. So we're going to pass the data off Replication state. Okay, So detail component through props. So let's see, how can you do it? So, first of all, I'm going toe add a prop over here, and drop is nothing but a custom attribute as a santo here and simply say products. Okay, so that's it. This is the problem. I want to pass. And I want to basically passed the product list from this route component. Okay? And I'm going to make use off the V bind toe buying the product list that is present in this view. Instance. Okay, so now this perk list is bandito this padilla prop. So the way you can deceive the prop is by first of all, let's head over to the list product dot view, and here you can define on property called us props. Okay, on in sort of the other. You can name the prop that you're basically passing. So we're basically passing the products. Okay? And now our to simply check whether we have got the data in this list product, What I'm going to do is I'm going to simply traitor. What? Here. So he relied the another list on. I'll simply are the least items on here. I'm going to wear Devi for a tribute on here. I'll say product in product. Okay. On Dhere. I'm going to simply add guard up dark name, Okay. And here it is, showing some sort of federal with this situation. Expecto have a V Banke. So, basically, whenever you're it reading over list unit to basically pass and interpret called a ski Okay , on this key has to be a unique value. So here, I'm just going to simply say product or idea we're here. So it's a product ready, since we have the unique I d. And you can even past index is well, if you don't have the unique ID's. Okay, so let me to see if this is good. It doesn't know. So as you can see now we have this new items over here. They're not being passed down from the parent company. So this list for a component, So as you can see, let me show you once again. So here we have the product list. So as soon as the road component dismounted were fetching the product list and storing in this progressed over here and we're passing down the props, we just products. And we're passing only product list in that particular problem. Okay. And the list product is basically receiving this prop and showing the information over here . Okay, that's quite simple. So now what I'll do is I'll descend the You are properly so first of all, let me just show you what kind of you I want to wear for the least product. So if I go to the board stop you okay? On here is the website for the same Go to get started. Goto components on. If you go down over here in the cards on, if you scored on over here at the bottom, then you will find this card group. So I basically want tohave cards like this for each and every product. Okay, so I'm just going to simply copy this on Bay Street over here. So let me just simply be straight over here, Okay? Let me intend this as well. Okay? And we basically don't need the multiple cards. Will be basically trading over list. Okay, so those will be dynamically created. So now I'm going to get rid off some of the attributes. They're not required, so I'll get rid off this. This and this as well on, I'll just keep the border region and the Elaine attribute. OK, so now what I'll do is I'll just can't beat this before. OK on me. Move this from here on the move. Dul l A as well. Okay, let me just properly intend this. Okay on. I'm just going to read it over here in the cards, so I want to basically trait over each card. Okay. And here, as off now, I'll just say, for example, brought up dark name. Okay, let me see this. And let's see. How does the U I look now? So as you can see, this is how it looks. Let Father improve it. So first of all, I want tohave dynamic border. So if the product is in stock, I want to have a green border. And if the product is out of stock than I want tohave Ah, danger Border. Okay, so if you have a look at the data, then we have this bullion value stored, which is in the interest raters. So if it is false, that means the product is out of stock on if it is true, then that means the product is in stock. So I'm going to make use off this on guy dynamically decide if the border Varian has to success or danger. So insert off, Static primary here. I'll say product in district us, and I'll simply add it. Ordinary operator. Okay, So if this is true, that means I want to have a border off success. That means the product is in stock. And if this is false, then I want to have a border off danger. Okay, so let me say this and let's go here in the browser now. And I think I forgot to apply TV buying, so I'll just be behind it so that this variables can be detected. Okay, so let me say this now. So his agency now the border villian becomes danger because both of this product are basically out of stock. And if I make anyone in stock, let me say this Onda fresh the app then insurgency We have this success bordered over here . OK, so now let's for their improve the way. So here, First of all, I had a strong back. Okay, on here. I d label for this particular information. Okay, so here, I'll say like this. Okay? And I want those space, some other information as well. Such as the prized the Brown as well. Okay, so he rides. Embrace a price on I don't display the price here on I also wonder Display the brown and I'll fetch the brown from the product. Let me say this and let's see. How does it look? So you had this looks good on What I want to do is I want to basically give a minimum off 50% weird toe this card so that it basically gets the proper space. So here in the fourth step card, I would like to have a style attribute on Dhere. I'll say mean we're 50%. Okay, let me see of this. Okay, so that looks good. And I would like to also have something off margin, so I'll add a class off margin M three. Okay, so this will give the margin all around. So as you can see, this looks even better on further. What I would like to do is I would like to show the status off the product in men tree here in the batch. OK, so I'm going to make yourself a bold step back. So let me show you. So here it is. So if you go over here So this is what I'm talking about. This is the kind of bet there's I want to show So here I'm just going to copy in the existing bed on Been to Space it over here in the quarter base on Dhere. Also ill decide the variant dynamically. So let me just copy this logic from here on, just going toe simply pasted over here, OK? And I'm going to add a V Bind directive over here as well and for the text I'll basically like to display in stock whenever the interest rate is this proof on out of stock, whenever the inventor status values falls. So I'll make use of the word calibrates is over here. And I are the logic over here, which is similar to what we just corporate just now and instead off success. I'll hearsay in stock. Andi, if this condition feels that been on purpose out off. Stop. Okay, so let me see if this now and let's see. How does it look? Let's go to the brothers. So this looks pretty good, right? And I think we should add some sort of space, but of in this particular name and the bed itself. So here on the bed, I learned a class off margin bottom three. So let me see if this go to the browser now, refresh. So as you can see, this looks pretty good. So this is how you basically pass down the data to your child component and displayed over there. So I raise this was all about displaying the products in the list product component on descending, etc. We'll Yes. Well, so thank you so much for watching this video 35. Add product functionality : Hello, everyone on in this video, we're going to implement the functionality. So I'd be product to our products database we just defined over here. Okay, so let's start implementing this. So we have already implemented the form validation. Okay, So all we need to do is that once all the fields that validated begin proceed further with implementing the airport of functionality. So here I'll go to the ad product, Don't view file. So as you can see, if all the farm fields are valid, then we'll get this result. Value s true, but they're always really great falls. So here are a few checkoff result. Okay, on. If this is true, then I can proceed with adding the product your database. So let's start doing so. So once all the fields are over here, what I'm going to do is I'm going toe. I met an event from this child component who were paid in combination with this abhorred view. Okay, so if you remember, I already told you that the child competent, basically images they went to different competent. Where is the parent component? Past three data using the props. Okay, so the telecom brain won't basically a great order. Mutate this state, which is present here in the road, competent with this product list. Okay, because the child component do not directly mooted this state. Okay, so here are state is this product list, and it is present in this parent component or road competent with this abduct for you. Okay, so I had product component, which is the title component. Should not update this particular state directly. Okay, so it will basically admitted event on our route component will listen crew that event and act accordingly. OK, so first of all, let's head over to the ad product component and hear what I'm going to do is tow emit an event. I can simply say this dark dollar limit. Okay, so here begin Simply passed the name of the event. So let's I would like to call it at product because it is the event name. Andi. Next, I can simply pass the pain orders will or the arguments that I want to pass for this particular even. Okay, So for the payload, I would like to pass all the form data, So here, I'll send them, and I can get the name from this door farm dot name. Okay, then I learned another field called Ice Price. So I'll get this from former as well. Okay. And I wont to upend dollar tow this particular place. So here I'll simply say dollar. And the last time. Okay, next, I want to get the brunt. So this is also ill get from this door formed or brown. Okay. And the last thing I want to get the invent free staters. And remember that this inventive straight us will hold the bullion Parore falls in the database. Okay, but in this redoubled and we are storing it as a string. Okay, this is not a 1,000,000,000. So look inward this string to the bullion I can simply say this dot form not in my interest raters equals equals true. Okay, So if this string is true, then this will become bullion true. And if this string is false, then this will become 1,000,000,000 falls. Okay, so let me see if this now Now let's see, how can you basically grab this particular even in the abductor view? Okay, so I moved to the abduct view and here is that ad brother component So you can simply by and even using the V on directive on past the name of the went OK, so I just want to basically buying this toe. The product. They're not defined over here. Okay, so this is the event that at birth is passing and we're basically handling this over here. Okay, So let me just simply declare my third over here, so I will declare anything method called as I product. OK? And the reason I have declared it a thing is because I'm going to make use off of it. Insert off it. Okay, So exigency have basically declared demand. Third over here on it is basically listening to this particular at a product event. Okay, so they're just ride on this now. So basically, let me just first to fall, see if I'm getting the product detail in the payload. So he'll let me to simply call it as new product on Dhere. I'm going to simply concern log this product information. OK, so let me go to the browser on the refresh the page. Okay, so now here, I'll start adding the product. So for example, the name of the product is T shirt prices from different dollars for the brand. I'll say it did us Onda for inventor. Let's alcohol tests in stock. And if I click on add product than as you can see, we got Deacon. So look over here and they're basically getting what we are trying to get, which is Brown invented status, which is a bullion value. Okay, the name and prices will, which has dollar upended on the price. Okay, so now we have the data that we need. All we need to do is simply insert these data insert off our products database. Okay, so let's see, How can we do it? So, first of all, let me I didn't write, gets block over here, okay? And then gets off any other like me simply console. Log it. All right, on. I can simply say of it. Excuse. Got post on for the, um I'll just copy this. You are okay, because this is are rest endpoint. And instead, off Get request. This time, we're calling the Post request because we want to create product nor get product okay, on for the payload. I'm just going to pause the new product itself. Okay, so once this particular promise, basically result, I can simply call the get product dysfunction again to get the latest products from their database. And it is going to basically certainly toe this product list on. We will get the abraded array inside off this product list in the less product company. Okay, so let me say this now. Next, go to the Broza. Refresh it. So now if I add anything over here, it should displayed over here. Okay, so let's just try this now. So, for example, if I at the park as T shirt prizes $40 brown as Puma on in many areas in stock, then hopefully this time it should appear over here. So frankly, going that product, then, As you can see, this product is listed over here. And even if you go here in the database, which is debido Jason. So as you can see, this perp is added, insert off this products. Okay, So this is how you basically performed the ad product. And I would like to also do some couple of custom addition, which is to basically clear deformed feels as soon as this product is a red. So let me just go over here, so I will goto at port of view. If I on as soon as this is done, I can simply say this dot form equal and object. And I'm going to basically empty everything over here. Okay, that's it on. One more thing I would like to do is I would like to set a 1,000,000,000 variable off submitted as false. So I'm going to simply say this dot submitted equals false because I don't want to show the others right away. I won't want to show the editor than user basically clicks on add product once again. OK, so let me see this now and let's try this once again. So let me close the terminal so that you can see properly over here. So this time let me call it as formal short prizes. $100 Brown as for example, read in England on foreign mentally ill see out of stock on if I could even add product then, as you can see, the product is added on the farm fields are here. Okay, so this is what we basically want it on even if you go to the database. So as you can see this Peter Englund product is added in our database. Right? So I guess this was all about getting the product on passing the events from the child component to dependent component. Okay. And creating ah, product by an extra deputy quest on basically fetching that and setting it to the state. Okay, so I hope you were able to follow along. And thank you so much for watching this video. 36. Delete Product functionality: Hello, everyone. So, in this video, we're going to add they delayed the product functionality. So we are going to pass and event from this child component, which is less product. OK, so we're going to have a delete button over here on it is going toe, Amit. Event dependent component images have brought for you. Okay. On the Abdur. Do you basically delete the product on it? Will update the product list on it Will basically passed this operated product list to the child component. Okay, so let's supposed to fall create the button for deleting the product in the less product dot view. Okay, so here, just below this, I'm going to add first of all horizontal group. Okay, so let me show you what it looks like. So this is how it looks on then. Here, Just below this, I would like to have ah, bootstrap, bro. And instead of this, I'll have poured stripped columns, okay. And basically, I'll have two columns, so the 1st 1 is for deleting the product, and the 2nd 1 will be for a dating the product on. We're going to implement the I did product functionality in upcoming video, but for this video, we're going toe simply toe the delete product functionality. So here, inside of this individual column, I would like to add a bootstrap Burton. Andi, I would like to have the icon instead of the text, such as delete or something. So let's go to the foreign, Dawson, because that's what we're going to use for the icons on once you visit over here, then you can symbolically can start for free. And recently they have added this something called a skit. So you have to basically signing using your account, Andi. It will basically then provide you the Syrian that you can include. OK, so as you can see, here it is. So I'll just copy this. And if you don't have a count on the phone, doesn't please do Onda. Once you do on If you click on create kit, then you will get this pretty. You are so simply copies on. Go to your core base on go to the next artist email and piece suit over here. So once you have this, you will be able to use the foreign does Americans. So let's try to use some of them. So if I go here in the icons. I basically warned the icon for deleting something, so I think it's called that stretch. So if I simply serves for it, I think, uh, this is what we want. So I just click on this So I click on this icon is Well, so let me go to the court based on here, I'll go to the less product out of your fight on simply going toe at this particular econo here on for the button video. I would like to give it a variant off danger. Okay, so let me see if this energy how does it look? So as you can see, this is how it looked on. That's what we want. Andi, I would like to also add the icon for at it, although it won't have any functionality. But I just wantedto the way so that we can use it later on here. For the I can. I'll simply search for credit, select episodes for the edit icon. So I'm going to make use off this and simply copy. This will be the core base on here going to replace this icon. And I'm not going to give David in danger over here Just going to simply keep this as it is . Night school didn't close it. Okay, so I think Let me to fresh the app. So as you can see, this is how it looks. OK, so we have this new icons and the Britons over here, so no, let's further implement the late functionality. So what you going to do is we want to basically meet the delete product event from this child component to the abduct view, which is parent component. So in the click of this burden, I won't do any different. So let's go to the court base. So here I would say the on click on simply here, I recall a matter Caldas Delete product on. I'm going to pass a perimeter car bitches Product idea itself. Okay, so I'll simply positive product daughter idea over here. Now let's declare this matter over here in the methods. So here I'm going to declare the methods like it on here and going toward their daily product. Mentor on this is going to basically First of all, I received the product ready, which we pass from the way for a Lady Onda. We basically want to. I made even so here and said this not dollar Amit. And I'll pass the name of the event. So he had also delayed product on. I'll pass the perimeter. This product, I d. Okay, quite simple. So let's use this event in the abductor view, which is dependent component for this particular component. So, as you can see here is that this product on debts handled this popular event. So here I'll add of the on delete product. And again, I'll buying this particular product method toe our product material, which really defining the abduct view on. We're doing this because through the pan incompetent maintains this state or the road competent. Basically, Minton's the state against her hands were passing the events from the child dependant on pennant is going to update this street. Okay, so here I let the matter called us a sink. They let product okay on it is going to basically received the product. Ready. Okay. And let's bring this out so that we can see that we are the same thing. This product ready? So he didn't say productivity and I'll positive product ideal here. Okay, let me see if this Let's go to. The pros are so like to be refreshed. The app on Open up the console. OK, so as you can see, here we are on the console. And if I click on this particular product, then as you can see, we're getting this product ready. And if I click on this, then we're getting the first lady off this particular product. Right? So all we need to do is hate are rest endpoint. Okay, which is local host 3000 slash product. Okay, so what we need to do is we need to make a deal. It request and minuto past the product idea as simple as that. So let's go over here in the court, based on what I'm going to do is I'm going to simply copy this. Try catch block over here. Okay. So let me be sued over here and instead off post request. I would like to make a deal. It request to this end point on here, I'll just positive broke. I d. But I want to pass it in the U. S. Help. Adam's okay, not in the body. So I'm just going to remove from here and here I can simply say bless, broke, tidy. Okay. And you can do this, or you can also make use off the back picks. So instead, off Khan coordinating your i d. With the string, you can simply make yourself back picks. Well, let me show you. How can you do it? So, first of all, I'm going to copy this particular you are ill. Okay on. I'm going to go to know everything from here. Okay, So I'm going to make use of the tactics. So these are the symbols. They're not available on the left hand side, off the number one key on your keyboard. Okay. Pastry dough here and slash. I want to know the animal. Use this variable. We just propriety. So I say product ready. Quite simple on once we offer it for this. That means once this particular promise is result than we are, they're simply going to call the get particle ist, which is off course going toe. Get the abraded product list and it will pass it on this product. Listo are less product component, which is the child component of this particular route. Competent on the U. S. Will be updated with the new list. Okay, so let me see if this Now let's go to the browser. Let me refresh the up on that. Me closed the console so that you can see clearly. Now, For example, if I do like this one, which is formal shirt. Let me click on this. So as you can see, it is deleted. Okay? Only we have three products. Let me try to delete this schedule shirt. Also we get so as you can see, it is deluded on. Let's check in the debate gorgeous and file. So as you can see No, we only have two products now. Okay, so we have successfully implemented the the date part of functionality on I hope you were able to follow along on. Thank you so much for watching this video. 37. Update Product Part-1: Hello, everyone. So this is the part One off update, part of functionality. So, in a great part of functionality, we basically one user to click on this button on it will open up a model. So in that model, reveal show the product detail instead of the form where users can upgrade difference and click on. OK, so basically upgrade the product and we will object the same in the databases. Well, okay, so in this part of your going to basically at the model so that we can perform all sort off for their operation. So festival work I'll do, is I'll basically move this part into a separate object product component because I don't want to handle everything in the least brother competent itself. Okay, so here, first of all, I defined a new company called Less Update Product Door to view. Okay. And I'll scare fold on Dhere. I'll name the component as update product, and here I can simply have ah, single day. So now what I'm going to do is I'm going to move this button from here on going toe pasted over here and here. Basically, I would like to add the object product component. So let me, first of all, import this. So here else import update product from God slash update product dot view and ill. They start this component over here, so its components on. I'm going to some British for this comprehend basing update product or here. Okay. And now what I lose, I'll simply dis competent over here. So here and subject product. So let me say this on. Go to the bazaar. Now, on, like many fresh. And we should get the same desserts. Residency. We have this button over here. So now what we need to do is very to open up the model on the click off this button. Okay, so let me head over to the bootstrap. You So I just go to the board, Chef, you. And if you go here in the components on, then go to the model. So, as you can see, this is the kind of model we want. Okay. And toe basically talk with the model on the basis off some William Value, you can simply refer this documentation over here, which is using the model property. So as you can see, we can control the closing and opening off model using the V model. So we basically want to implement this only. So let me simply copy this model on the street over here in the update product daughter view file. And I'm going to define this variable, which is model show in the diameter. So let me declare the time a terrible here and here I'll say written on. Then I'll declare the model show property on Initially answered, it took falls. So now you are basically total The model show very well over here we can simply add a little is not like this. So they let me this copy this from here and simply pasted over here on. Let me see if this and I think we should be able to open the model. So let me refresh their And if I click on this so as you can see, our model is opening. Okay, so now let me add some more functionality to the model. Okay, so basically festival. I'll add the title. So let me just go over here and I'll remove this content from here. Okay. On for the title, I can simply say so. Let me get this straight in explain. So that begins easily. See the props. So here I like the title as update product. Save this garbage. The browser's refresh the page. Okay, that looks good on. We basically want to have some more control on the model itself. Okay, so it will be better if we have some sort off event listener, which basically listens to the events. Such as when the model is opened or when the model is closed. Oregon 70 model. OK, button is clicked. Okay, Things like that. So you can do it by simply, First of all, let me show you if you go here in the prevent closing section. So as you can see here we have this various event listeners available on the boat trip. Moral competent. So these are show here than in. Okay, so this produce even dis fired whenever the model is opened on. This event is fired whenever the model is hidden are closed. And this even this fired whenever user clicks on. Okay, Okay. So let me handle everything, so I'll just copy this from here on going to pastry over here only. Okay, so let's declare the matter for each and every one that is being fired over here on. Let me update in the image. Well, so for example, for the show, I can simply say show mortar. That makes more sense for the hidden reserved model. Naming is okay. And for the Okay, Vint, let me call it Does handle summit. Okay, so let me declare all of this matter so that you can see properly when this matter are fired. So I'll Adam met, hurts property over here, and there's going to be an object. And instead of this, I'm going to declare various functions. Okay, so first of all, I have declared the show model. Then I'll declare the desert more Elizabeth. Okay, on the last one is the handle. Submit. Okay. So let me add a console log over here on here. I can simply say console log. I can say mortal open. Okay. Here. I can simply say mortal closed on here. I can simply say submitted. Okay, so let me say this. Let's go to the browser's refresh the application on. Also, I'll open up the console so that even clearly see the logs. So if I click on this so as you can see as soon as the model is open. This particular my thirties fired, which is mortal? Open. Okay with the show model. OK, on this is being fired by this image with this show. Okay, on, if I closed the model the next agency, we have this log over here. That means this desert more police fired. Okay, on, if I basically click on Ok, then. As you can see, we have this Semitic log over here. That means this handle some method is called because of this. Okay, meant that is being emitted by the bootstrap model component. Okay, on. One more thing I would like to show you is that let's say, for example, you want to perform some sort of form validation on. You don't want to closed immortal whenever the user clicks on. Okay? Okay. You want to first check the farm fields and then you want to close the model. So what you can do is you can remove this before it behavior. OK, so Canada later, before behavior is if I click on OK, the model is closed. Okay, So we want to stop this different behavior. So what you can do is you can simply get the event object in the handle mattered. Okay, so this event basically passed this event object by default. So what you can do is you can make use off this pregnant before my third over here. So let me just do this. So here in this handle submit I can simply say are proven default. And I'll get this event object as an argument. Okay, so now whenever I'll click on OK, the mortal will not be closed by the fourth. So let me refresh the app. And now, if I click on this button on, if I click on this okay, then insurgency. The model is not closed. So even though we're getting this law, that means this matter has been called. But we are basically preventing their default behavior. Okay, So is this was all about simply managing the moderns insert off for replication on in the upcoming video, we're going toe deform so that users can basically update the product detail instead of that form. We're also going to add the formal addition on. Then we will in the for the video's going toe, basically perform the update functionality. Finally update the product detail into our database. Okay, so that's it for this part. One on. Thank you so much for watching this video 38. Update Product Part-2: Hello, everyone. So this is depart to off update product functionality. So now we have a red. The model. Now what do you want to do is for this part you're going to add the form wherein the product detail will be pre populated and user can simply a plate. Those feels okay. And we will also play the form validation as well. So let's do it now. So what I'm going to do is I'm going to utilize this ad product form itself so arts festival goer Villacorta base on. I'll go to the ad product Dark View file. And here I am going to simply copy this form. Okay, let me simply pestered over here in the abject product profile. Okay, so I have restricted over here on. Let me intend this properly on. I would like to also copy the form data itself on Also, this submitted a value because we will be using this value when validating form. So let me just add it over here in the date off the object product view component. All right, so let me just say this on. Let's go to the browser on. Let me refresh the app and now, if I click on this added burden, then as you can see, we have the farm fields, but we do not have the data populated. So first of all, we'll need the product data in the abject product component. So we're going to do this by passing it as a props. So let me just go to the court base on Festival. I'll go here in the less product out for you, and here I am willing to simply passed the product later as a prop. So let's say the name of the profits product. And I'm going to simply positive product over here for each situation. OK on, let's define this particular prop in this abject part of competent. So he ran said, Props on insert off. You can define all sort off crops that are being received by this particular competent. Okay, so let me see of this. And now what I'll do is remember, this model is opened. I'm going to set deformed data from the values president in the product data, so let's do it now. So in this show model, I'm going to simply say this dot form equals an object. And first of all. I'm going to set the name. So here I can say this, and I need to access the props so I can do it with simples ing dollar props on the name of the proper pitches product. And I can simply say name okay and lurch to the same for other fields as well. So for the place, I didn't say this. Dark dollar props dot product, Dark place. Okay. And if you have a look at the debate or Jason, then we already have this dollar offended in the price, but in the form we don't want to show this dollar. So let me just simply split this particular string Vitor dollars in ball. So this will basically return in a way, and this root index will hold your dollar, and the forced index will actually hold the place. So I'm going to access the price from the first index. Next, I want to access the brunt. So I would say this dark dollar props Not that it dark brown. Okay. And the last thing I want to access is then Ventress. Traitors. So here I would say this not dollar props dot product dart in district us on inside of the debate. Georgeson. We have been mental status as brilliant, but actually for the reader Britain's we want to show it as a string. OK, so I'm going to simply make use off to string my third over here. So it is going to be silicon work this bullion value to the string. Okay, so let me simply say this. And now as soon as the model is opened, our farm should be pre populated with this friends. Okay, so let me just say this and let's go to the browser Onda fresh the application. And now, if I opened this particular product, then we should have the popular great field as agency. So we have all of this field pre populated over here. Okay? And if I open this one, then we have this product detail feels okay. So now what? The wonder do is assumes the user clicks on. Okay, We want to basically perform the formulation. Okay, on you remember? Right? The handle some. What is the matter? We just call it on the click off. Okay. As you can see, we have defended over here. So what we'll do is we'll validate the form just like we did on the part of form. So let me show you. So this is how you basically do it on? Let me copy this as well. So I'm going to simply plastered over here. Andi, Since we're using the of it, I'm going to make this function racing Okay on, We can simply check for the result. So let me first of all console, log the desert again. So let me simply say this on. Let's go to the browser now. Onda fresh the application on if I open up the console on open up this as well. And for example, if I don't put anything over here and if I click on OK the Nez agency the validation is applied and bigger, proper adult messages here as well. Okay. And we get the result as false. That means the form state is invalid. OK, so now what you going to do is once deformed state is valid. Then we want to basically post it further with adding the product to the database as well is we want to close the model, right? So I can simply say this dot mortal show equal to falls. Okay, so it will hide the model and we can say this dart submitted equals falls as well. So that the Aramis is our north soon because the form straight is valid on One more thing I would like to do is a soon as the model will be closed. I think this particular method will be fired by this particular element which is hidden. Okay, so here we can simply say Let me just show you here We can simply say this start form equals an empty object. So let me the simplicity of this. Let's go to the browser now refresh the up on for example, if I added this product and if I enter any sort off wrong value and if I click on OK then as you can see, the model is not closed and we get the property federation messages. And if I enter the right value and click on OK, then as you can see, the model will be closed, OK? And of course, it is not going to update the product detailers off now because we haven't added the logic for the same. Ok, so we're going toe idea logic for updating the product in the database in the next. Video on. That's it for this video. We just basically wanted toe have the farm ready so that users can upgrade deported details . Andi, I hope you were able to follow along. And thank you so much for watching this video. 39. Update Product Part-3: Hello, everyone. So this is the part. Three off update product functionality. And in this part we're going toe idea Logic toe finally store all the abraded information from the abject product form to their database. So let's see, How can we do it? So since we're maintaining our state on the wrote component, which is Abdullah view, we need to pass the event from this abject product component toe. First of all, let's put a compliment on this list, but a component will pass even toe the road component on good competent will finally upgraded eight or using the pick all and finally develop great this straight off the application. OK, so let's see, How can we do it so first awful. I'll go to the update product God View file And here I'm just going toe Emmett event. So here I'll say this thought dollar Emmick And first of all, for the name of the event, I'll say update product. Okay, then I need to pass the data as an argument to this event. So what I'm going to do is I'm going to prepare, did it over here and pass it. So first of all, I'll say for the name and said this art form dark name Okay for the price unit to upend the dollars and again on remember that we basically removed the dollar sign whenever we're showing the price in the form. But this time, when starting when it to again appended letter saying so into this start form dark price for the brand I'll just simply Fetchet They start form not brown for the in Ventress Traitors when it to convert this to the bullion. Okay, so he ran Said this door form dotting when district us, if this is equals equals string through. Okay, so if this is a string through than this will become bullion true on if this is false, then this will become bullion falls. Okay. And we also need to pass the I d so that the root component can make in a call to an end point with that particular product, I d Ok, so here l z i d. And I'm going to pass the ideas this guard dollar props dot product dark I d Ok, so we have prepared a later on, but let's try toe grab this event in the least product or view file. So here I listened for the event using the own directive. Okay, on. I'm going to basically call this object product method, which really find over here. So here I am going to simply say abject product. Okay? And first of all, I would receive the operated product object over here. Okay, so here I can say this dark dollar Emmett again, the name off the event. So again, in college, as a bread product on, I'm going to simply pause this abraded product. OK, so now what I'll do is I'll basically again listen for this event in the Abdullah View Group companies on this list brother company. So here I am going to again make use off TV on directive on going to listen to the update product. So I'm going to handle this event in this abject product matter. So let me just define it over here, so I'm going to make this function facing okay. And the reason I'm making this thing is because we're going to make use off the await keyword on. We're going to make any vehicle, just just like we're doing over here. Okay, so first of all here in the argument. I'll received the updated product. Let me simply concerned Lord, the updated product over here. Okay, so here I can see up. Did it? Product I get. Let me see if this let's go to the browser. Now, refresh the application on also the open of the console. So no, If I click on this particular product on, if I update the place 200 click on. OK, So as you can see, because this lock over here, that means we got all the values that we needed for finally upgrading this information. Right? So we have this price over here, as you can see. So now what we'll do is we'll basically make any Baycol to the backend server on basically , update the park over there. So I'm going to simply copy the court from here, Okay. On Bay Street over here. So this time, instead, off did it. I'm going to make it off the port request. Okay. So for the product, I d. I can get it from Abdul your product. Dark. I d on. I'll pass the abraded product as the payload. Okay, so let me say this on. We should see the updated information now. So let me see if this let's go to the browser on defense the air and open up the console as well. No. For example, if I update the price 200 if I click on OK, then, as you can see, the prices updated over here. And if I basically changed the administrators to ward off stock, click on OK, the nez agency. This change to the out of stock on Even if you take this in the liberal Georgeson, then as you can see, the casual shoe product is basically out of stock on its industry sector falls. So basically conclude like me to show you how the data is flowing. Okay, so we are here in the update product or view component. As soon as the user clicks on the ultimate, we basically fire an event called us a great product. So since this update product component is present in this list, part of component Okay, so we're basically first awful grabbing this upgrade product even here in this list product component. Then this list, but a competent is again omitting the event we just again called is a great product and we are finally listening for this event on the list, but a component in the abduct view. Okay, so this way you basically positive data from the child to the route via events. Okay, so finally, we're handling everything over here in the upgrade product matter. It is making an AP call to order standpoint, operating the data. And as soon as we get the result, they finally called the get product list. So this basically for just the data and updates this straight off the application. So I guess this was all about upgrading the part of feature, and I hope you were able to follow along. And thank you so much for watching this video. 40. Project Overview: Vuex + Vue Routing: Hello, everyone. So, in this video, I just wanted to quickly give you the information about what we're going to build in this section. So we're going toe build this product manager app that we build in the previous section. But this time we're going to implement to new features. The 1st 1 is devoting itself. As you can see on the 2nd 1 is the View X store. Okay, so in the previous section, we used to communicate between the components using props and events. But this time we're going to make use off the view x state management, and we're going to understand everything. More dessert, and why do we use it in the upcoming videos? But I just wanted to give you a brief information about what we're going to build. Okay, Andi illustrate the functionally they will remain same, such as operating the product. Okay, on every sort off for meditation and everything. Okay, it is going to put him in the same on you will also have the exposure to the your devils in the section. Okay. Told me about the application level state off your application, using the View X. Okay. So that was there is a lot to learn in the section on. Without any further ado, let's get started 41. What is Vuex and What problem does it solve: Hello, everyone on in this video, we're going to understand bodies view X onboard problem does it? Basically salt. So if we have a look at the current architecture off replication, we're basically having complex flew off props and events. Okay, So, as you know, we basically have a road component on It has basically two child component product and less product and less product is also having another child component for operating the product with this update. Product competent. Okay, so now if they don't component, which holds the application level state, which is product list. So if root component wants to pass this particular state down to the A great product, it has to, first of all, passage through the props to the less product. And then this product will pass it to the update, put a component using the props. Okay. And now, if the update product Rembrandt borns toe update the application level state, it has to, first of all, Amit an event to release product. And then this this part a component, will admit and event to the road component. Okay. And then finally, the road component will update the application level state. Okay, so can I believe you are having only three components. But you can imagine if we have 15 to 20 components or more than that. And in big application, you're going tohave those many components, right? So just imagine how complex it would be to pass the later down the tree and passing the events up there. Three. Right. So it would make our applications so complex. So this is the problem that we're having And View X basically solves this particular problem. So let's see what is relax and how does it solve the problem? So you X is a state management library for refuges. So it basically has a central store which basically holds the application level state, which can be accessed by any competent okay, on your view extra or is the single source off group That means the state off the application can be determined by the do X store. Okay, so once we implement the View X in our replication, our application architecture will look something like this. So now, as you can see, here is the article picture with the View X implementation. So we have this component at Porta component. Let's put a component and a Breitbart a component, right? So now, instead of passing the data through props and admitting events, we basically have a central store which is called this view X door. Okay, so this view Exeter is holding the application level state with this product list. So now, as you can see, the list, but a component and the route competent can directly fetch the application state from the view extort on if they had put a component and a great product component, oneto update the state than they Connecticut. We communicate with the view extra or instead off passing the data through props or emitting events. Right, So this basically solves this problem like, for example, if you have 15 to 20 components than all of those components militarily communicating with this store. So this will basically get agreed off complex props on events. Flu. OK, so now let's have a look at the architecture off UX in depth. So now what will happen is whenever the View com parent wants to update something, it will basically despite an action. Okay, an action isn't basically asynchronous tasks which will do some sort off. Maybe our AP called your server or any sort of asynchronous operation. And once this is done, it will basically commit a mutation, right? So once it basically commits the mutation, it is the mutation which will basically, finally update this state off the application. And as soon as your application status updated, it will be reflected in the view components. Right now, the biggest question that the people get is why there is need for dispatching an action instead of directly committing a mutation. Okay, so always remember that actions are asynchronous on mutations are Cingular's. So now the question comes by the mutation has to be cynical nous Okay, so remember that the purpose off the View X is startlingly toe have a central store for storing the application level state. But it also makes your application level state more predictable and easy to debug. Okay, So if the mutations are simple nose than they can be easily drag using the devils, which we're going to see in the upcoming videos. So, with the help off death tolls, you can basically track each and every mutation, and you can exactly check what sort of state is changed by the mutation. Okay, so if you have. Your mutation isn't goodness. And let's show you basically commit four mutation at the same time. And there is no proper order in which those tasks will be fulfilled or completed. Then it will be very hard Toe de buck. Which mutation? Basically teens this state. Okay, so if you're mutations are cynical us, it is very easy to detect which mutation actually change this state, right? And if they're asynchronous than it will be hard to do work. Like which mutation? Ultimately, teens thestreet, right, because it can happen in any sort of order. Okay. And if those four magicians are running synchronously, that means it will be very easy for us to debug the straight off the application. So that is the reason why your actions are specifically designed to handle the ace in gonna start and mutation has to be seen closer. And this is the reason why you should force dispatched the action. And it is the responsibility of the action to commit the mutation. Okay, you should not commit the mutation directly from the view company. So the guys, this was all about the View x State management on were window implement this particular liberally in our project in the upcoming video on. I just wanted to give you a brief overview regarding this. So I hope you were able to understand it on Thank you so much for watching this video. 42. Vue Devtools: Hello, everyone on in this video, we're going to basically install Dave your devils for debugging appellation so you can install It s for your browser. Whatever browser you're using, I'm using room. Okay. So you can see the search for you have boots, then the name of your Broza. So we'll find it over here on on my system. It is already installed, so I'm not going to stall it again. Okay? And once you have it, you can simply open up the developer tools and you can go over here in the view tab. Okay? So if your application is running, then this view tab will be visible. So as you can see here, it clearly shows What are the components that have been used? OK, so as you can see, we can track the app header had product less product. Okay. So you can simply see your competent tree. Ok, Onda here. If you go to the View X on here, you contract the mutations and state off your application, which we're going to do in the upcoming videos. So and here you also have the events. So, for example, if actually condoms, so as you can see, these are the events note are fired by the application on If I change anything. The nez agency, these are the events there that fired. So you can also track, like, worked sort off values imitated by the event. Okay. And then you have rolled things as well. So once you implement it out, which we're going to do, you will see your role. So here, as well on one more than I would like to show you is if you go to the settings than you can basically enabled this particular option, which is also Lord Vexed eight. So, by enabling this, what will happen is, once you start working with the View X so anywhere, any sort of mutation is happening in your application, the new state will be automatically shown up over here in sort of having you do click on the mutation every time to see the new state. Okay, so this is what this producer option do. So this was all about the view devils. And I hope you have installed this on your machine on Thank you so much for watching this video 43. Setting up project with Vuex and Vue Router: Hello Driven on in this Very We're going to set up the project with views. Ally. On this time we're going to add some other features such as the View X and their over. So let's start doing so. So here I am going to simply save you. Create on for the name of the project. I'll save you X, you know. But after and I wont to simply hit enter. Okay, so here again, it is asking for the features. So previously we event of it. The default option this time will go with this manually. Select features. Okay, on the custom preserved that you see here, you can basically create your own. Place it as well. Using this manually, Selectric features. So once you see, like all the manual options. So it will ask you to whether you want to save it as a template for future reference. Okay, so when you say yes, then it is going to create this template are preset. So suppose if I want to create the project with all this Witters, then I can simply sit like this, Prasert, instead of having toe again and again manually select, which is okay. So But this time I will just click on manually Select features. So here it is. Basically asking for videos features two including that project. So I'm going to basically Tuesday older and the view X okay on you convey seriously like this feature by pressing backspace. Okay on Yeah, I'm going to hit. Enter on It is going to simply say use history more for older I'll say yes. Okay, so the stream order will be circulating more the hash from the rotor on. But again, it is asking for pickle inter. So I'm going to select this year's Lind with other prevention only You also have, yes land with Airbnb conflict standard confidence Will is the prettier Okay, so these are some extended years linked standard configuration which you can use, but I'll go with the standard one. So here it is Basile asking whether you want to run Deland on saving the files or if you want to do it on the comet as well. Okay. So if you feel like the second option than what will happen is if you really commit your files than it is going to run dealing on If you're lending fails, then it is going to not perform the comet. Okay, but here I'm going to simply salient on. Save on Here it is official asking whether do you prefer to place conflict for Babel postseasons? Yes. Length in a dedicated file or in packets? Dodgson. So I always before toe started in the dedicated file. Okay, so if you remember in the previous project we have the same conflagration in the package Georgeson itself. Okay, but it is good to have a dedicated file, so I'm going to choose their dedicated file option over here. Andi. As you can see, this is the option that I was talking about. Save this as a preserved for the future projects. So you can simply say yes if you want. Oh, and you can name the place it has. For example, my new police. Okay, you can name it, whatever you want. So it is going to basically create the project for you. And if you create the new project once again with the view, you will see that new present being presented over there. So you don't have to choose all of these options again and again. OK, so let's just wait for a while till this is done setting up. Okay, So, as you can see, it is successfully created the project. So I will simply move into the project folder on here. I'm going to simply first of all, open record based with TVs scored. And I'm also going to start the project using and came run. So So here I am going to simplicity and being run. So Okay, so let's first of all, see what sort off boilerplate Dewey get with this newly project created. So I'll open up this in the Broza. So, as you can see, this is the boilerplate appellation they're discredited on. We have this rotor implemented out of the box. Okay? And if we have a look at the court ways, so as you can see, we have this public for lead over here, which we had previously on. This is our route. They were. All of our components are injected. And then we have the SRC folder on inside off the SRC folder V, as usual, have the Assets components folder. And here we have a new folder called his Views. Okay, So the difference between our component and the views is that your views are stand alone pages that have individual drought defined in their outer file on your components are, as usual, reusable piece off court that you can use it in many places inside off your application. Okay? And then we have the main gorgeous as usual. But here we have two new things. The force one is there are per configuration and the 2nd 1 is the store confrontation. So let's have a look and did order. So as you can see, you basically defined the adults in another Onda. We basically selectively more. That's history in this, Eli. So as you can see here, it has added the history. So what will happen is you won't see the hash inside of the route. OK on, if we talk about the roads than this is how you define it, you basically specifically part and the component that should be loaded whenever this route is active. Okay? And if you want to basically lazy load the component that instead of directly specific the component, you can simply specified like this. So this component availability still ordered. Okay, on if you talk about this store so as you can see this is our store where we have state mutations and the actions. So, basically, this is where will maintain all off our view X story information, such a state mutations and the actions. And we're going to implement this in the upcoming videos. Next. If he moved with ESPN, file the residency. This time we have the dedicated confrontation file for the years limp. Unlike previously where we had all of this confrontation inside of the package. Gorgeous and file okay for that's a nice thing to have. Then we have the papal conflict. Okay, then, as usual, you have your package, Jason fellas. Well, and here we have the scripts that just solved building Galindez. Well, okay on As you can see, we have this additional packages such as View rotor and the View X itself. So this was all over the project. Structure of animal. You choose mental features on this is the kind off boilerplate that you get on you guys. This was all about the product structured and greeting Europe. The D views ally, and including the features such as the View X store as well as their alter. Another additional information that we just did. So I hope you were able to understand it. And thank you so much for watching this video 44. Setting up Product Manager App with Vue Router and UI: Hello, everyone. So in this video, we are going toe quickly set up the product minutes rap in this particular application. So you know that the idea is to simply implement the same application, but with the View X right. So we basically want to get rid off the props and the events, but most of the U s going to him in the same. So what we can do is we can take court reference from the previous project and I didn't know this project. OK, so we're going to do this in the single videos for that. Our time is not wasted writing the whole thing again. So let me open up the court case. So, as you can see on the right hand side, we have the newly created project. It is the view exploded at. And here is the old project that we created in the previous section. Right. But as I told you that most of the U S going to them in the same So begin quickly, take their friends from this project on the street over here, and we can get rid of the things that are not required. And then here in this particular application, we can one with adding the View X. Okay, So, first of all, what I'm going to do is start adding the dependency that our project will require. So let me open up terminal over here. Okay, on what I do is basically first we'll go to the package store. Jason, file on. As you can see here at the dependence is that be required without bootstrap. Which of you develop? Date on Excuse. So that means. Told them so for stole here. I'll say in B m install. Excuse. 10 minute. Bootstrap. Then we need bootstrap hyphen view. Okay, then we need the hyphen validated. So these are the dependency that we need on. I'm going to install it on. I'll get back to you as soon as it is done installing. Okay. So as you can see, the packets are installed. So first of all, where Diallo is closed, the terminal Andi will move back to the main door. Jace, in the previous project on, I'm going to copy all of this on Mr Door here. So now we have the bootstrap on the delegate configuration ready. And I would like to also add the foreign Dawson literally that were included in the index dot estimates. So let me copy this from here. Ongoing Dubay Street over here in the next order steaming. Okay, so let me simply pestered over here. That's great. Now let's move on for that. So in the main Dodgers, we have all of this thing ready. OK, so now what? I lose. First of all, you clean up the new app. So if he basically go to the market RJ's file, then as you can see on the road route home component is loaded or home. Page is loaded. So let me open up the homepage. So it is present in the view folder. So if I go over here So as you can see here, the hello world component is included, so file basically get rid off everything from here. Remove. This class is well, Onda. I'm going to remove this component as well. And I will also go to the at Broadview on remove everything from here as well. So first oral Meanwhile, the styles Then I would like to remove this robber links. Okay on, by the way, if you want to basically laid out in sort of the view application. Then you can make use off this rope a link. So the way it works is that whatever road you have specified in the outer door, Jess on it basically has the component associated as well. So whatever component is associated toe that out, it is loaded in this adulthood hyphen view component. Okay, so that's how the whole thing works in the view. Just so what? Louise first all remove this boilerplate thing from here. I'll keep the overview component as it is, because we're going to add the voters in our application on going to the movie. Says Well, on going to remove this idea off EPAs with. So let me see if this now let's go to the browser. As you can see, it is completely blank. Andan certainly home. Let me just add a text called us home so that you can see properly. So as you can see on the root out, your home page is loaded. OK, so now what I would like to do is first double at the application header. So as you know that we have already implemented, they had also let me simply copied this from here on going toe paste it here in the component itself. Okay, so as you can see, here is our header. So what? I would always I'll goto the abhorred view on I'm going to basically importantly, header here. So he writes a script on I'm going to first of all, import a pedal from for the importing. What you can do is you can make use of an alias called us at the rate. Okay, so there's at the rate basically points to the SRC folder. Then you can specify the whatever part that you want to go. For example, we want to go to the components. Then I heard a lot of you. Ok, so this ill is basically says you from doing this Dark dark slash, started slash toe basically moved up. Defaulted. So what you going to simply make yourself the ideal rates Alias. So it will basically put into the SRC for that. Okay, so that's quite handy. Now, here in this script back, I'm going to someplace export before world on Dhere. I'm going to basically specified the components property on here. I'm going to improve the app header, okay? And what? I'm going to do is I'm going to add the herd over here. Okay? So let me see if this now on, we should have the appetite now. So as you can see, we have the airport er on. We have this home, our text over here. So one more thing I would like to do is simply I d container around the interview so that whatever template is injected instead of the interview, it is basically present inside of the good shepherd dinner. Okay, So just like we have made use off the board ship container in the outdoor viewing the previous project, I'm simply going to paste it over here on going toe. Basically, remove these two things at product. At least put a competent, and I'll basically move this interview inside of this. Okay, so let me see if this now. So as you can see, if you have now the home texting center, because it is basically wrapped around this justify content center would step. Oh, okay. So every little interviews will be wrapped around with separate tenor and narrow off class , justify content center. So there's there s So now we have the had already I would like to our do some couple of customization in the header. So here, first of all, I would like to add the bootstrap, never items. So here and stable strap. Now, I don't And insert off this. We're going to make us off the road tolling. Okay, that I just talked to you about. So here I am going to basically, first of all, specifically part using their to attribute. Okay, So the 1st 1 will be for the home road and the text as home on. I'm going to simply copy this on pasted over here. And the second order will be for the about page. So if you say about and I like the adulterous about Okay, so let me say this on if you have a look at that altar, Gorgeous. As you can see, we already have the vote entry for the about. Okay, So let me see if this now on, if I go to the about as you can see, we are navigated to the about face and the home pitch. Okay. Now, I would like to do some sort of styling for this name items, so I'll go to the outdoor view styling and here I'll add a global styling for the ankle. So he died Is here text decoration as none. And I had an important flag. Okay? And I would like to also said the color as white and I learned important, like here as well, so that it doesn't get over it. Okay, save this now. So is against, you know, we have this under lane and the blue color remote from the nerve items. Okay, so this looks good. So now what we'll do is we'll basically add the egg product form over here in the home. Bit on, we will have another page for the product in which we will list the product. OK, so first of all, let's make debates 40 product. So I'll go over here in the views on I'm going toe, not make the component. I'll make the view. The reason is that I want to make this place as a stand alone pitch which has a role to entry. So we're basically falling. The current project structure of it is to separate the competence in the views according to the route. So here I'll say simply new file on here products, dark view okay. And I'm going to scare fold. Who have the basic thing ready on here inside of there? Dave, I can simply say products. Okay, so let's go to the app headed or to you. And I'm going to have another road on here. I call it does product list. OK, so this is the name of the boat on for the part I would like to. First of all, I did order entry for this. Okay, then only will be able to use it. So like me I did over here for the name of the road. I'll say product list for the part hyphen list on for the component. First of all, let me injected. So here. I didn't say product on. I'm going to see this as for accessible on going to the place, the component as product. Now let's go to the app headed out of you. And now instead, off slash about I'd say product hyphen list. So let me see if this now on. As you can see, we have this new item over here. And if I click on this, then as you can see, the product speed text is visible over here Okay, so now we have proper navigation ready for application on As I said that on the home page, we basically want to have the product form. Okay, so let's implement that. So, first of all, I'll copy this ad. Brought a complaint from here, going toe based right over here. Okay. Andan strayed off before I would like to have every six on. I would like to go basically living a couple of things such as we don't want to. I mean, this thing over here. Okay, so I just simply come in this out and I'll keep the rest of the thing as it is. Okay, on whatever like to do is, since we want to have this ad product component on the homepage. So here is our homepage. So I'm going toe. Basically add this competent to the home page. Okay, So first of all, I'm going to import this competence I'd say in port had product from, and I'm going to make it off the adopted alias, which points to the SRC folder on here. Also, components slash add product are few. And here I am going to simply specify this competent and remember that this thing is equivalent to this in all that we have injected this competent over here. I'm going to simply remove this on going toe Are discomfort int like this. Let me say this now and now. We should have the ad product page on the home page itself. Says you can see we have this know. Whatever like to do is I would like to have the list product page on the product list out. Okay, so remember that in the previous project, we had the least product component. So I'm going to simply copy this as well on going toe pasted over here and in the least product. I would like to remove this m before because I would like to have all well, columns this time on. I would like to basically remove this everything from here because we're no longer going to use it. Okay, on, if we talk about the props than they will not receive the props this time. Okay. So earlier, this least product wars receiving the props like this, as you can see over here. Got it. So this time we're not going to pass the props over here, so I'm I have basically removed the props on what I would like to do is since I've removed the props on this props is currently used here. So if I basically include this list for a template in the products Northview page, we're going toe have the error because this media but it's not defined. Okay, so here, just for the sake off removing at it, I'm going to add a time I thought over here, and I'm going to basically defined this products data over here. Okay, so let me say this Now on. Now, since we have this list product ready. But one more thing minuto have a look at is it has dependency on the update product. So let me copy that as well, so I'll just copy it on the street over here. So, as you can see, we have the update product over here and here began. Also remove this Emmy thing from here. It is no longer required. I'll keep the rest thing as their this. So if I now go to the least product, it should have access to the update product. OK, so now, since we have the least product ready, what I'll do is I'll go to the products toward view page, and I'm going to important this product component here. So here I'll say, import less product from I'm going to make use off the iterate alias on here. Also, components slash this product Our view on what I'm going to do is I'm going to space about this component in the components property so here and say list product. And now what we can do is we can basically specified this complaint over here, so I'll get rid off this on here. I basically specify delis product. So let me see if this Now, let's go to the brother that fresh the up. And as you can see, we have this list product over here, okay? No. One thing I would like to add is that if there are no products found, then at least we should have a message over here saying no products present. So what I'll do is I'll basically go to the less product page on the here. Insert off the board step card. I'll simply Addo, for example, edge to on here. I'd say no products phone, okay. And I would like to show this on Lee If so, I'll make yourself Maybe if directive on I would like to show on live the products don't lend is less than one. Okay, let me say this presidency and we have this property, you know. And in fact, what we can do is we can do the same thing in the previous project as well. So let me simply I did over here. So just below this worship garden group, I'm going to add distinct over here. Okay, so again, we have this props over here, so this condition will work totally fine. OK, so yeah, we have this list product ready. I would like to now basically do one more thing, which is to copy the debate Georgeson from here. Because we will require this over here as well. So basically have the rest endpoint doing track with. So let me simply because everything from here and I'm going to simply paste their debate Georgeson as well. So I think we are good to go with the u Y. So we have basically added everything that we need on. I think we should be to really find toe move forward to implement the View X in our application to have a central store instead of having the complex props and the events flow . And I think this way it will be very easy for you to understand the View X because you are basically developing the same application without give you X on then V w x. Okay, so you're going totally understand how difference doesn't bring. Okay, so these that's it for setting up our basic product manager app. Okay on Thank you so much for watching this video. 45. ESLint Config Update: Hello, everyone. So in this group, really I just want to abrade some Yes, in conflict. So if you remember in the previous project we basically had turned off the road for the no console. So we'll do the same for this project as well. So if I go over here in the U. S. Lind are Sydor Js file. So as you can see, the no consul rule is currently said to others in case of production and in case off all other environments, it is said to off. But what I want to do is I want to set it off in production as well. I mean, basically, in all sort of in moments, it should be off. So I'll just remove this condition on going to simply keep it office. Well, okay, so, no. In all the cases, whether it be development, staging or production, this particular rule will always be off. So that's a quick bread that I wanted to make on the U. S. In conflict on. That's it for this video. Thank you so much for watching this 46. Creating State in Vuex Store: Hello, everyone. So, in this really over, you're going to basically create the product. The state, which is our application level straight into the view. Extort. Okay, so let's start doing it on. Once we basically create, the state will try to fetch it in the product list component. Okay, so lets for start creating the state, so I'll go to the core base on. First of all, I'll go over here in this store door Js file, as you can see, so here you can define your state mutations and actions. Okay, So instead of defending everything in single file, I would like to have a dedicated file for state mutations and actions. Okay, So what I'll do is in the SRC folder. I'm going to create a new folder called As Store on. Insert Off this. I'm going to create a new file call s index dot chase on here in the index door. Jace, I'm going to basically based the content off this toward or chase. Okay. And now we no longer need this toward RJ's file. So I'm going to basically remove it. All right, on, if you're wondering how well basically fit the store, Georges in the main door days while because, as you can see, it is bicycle expecting Ah, store. So here, if you don't specify the extension of the file, it will basically look for two things either filed with the name off what you have specified with this store Dodgers, which was presented earlier. Or it will basically look for the store folder and index George's file inside off it. Okay, so that's how it works. So earlier, the store door Js file was president. So it was picking up that. But this time it will basically look for the index gorgeous file inside of the store folder , as I just told you so hands, it is going to work. Find that wins. This import is going to work. Fine. OK, so as you can see, I really find everything in the index suggests now. What I'll do is I'll create a separate file for the state mutations and actions. So here I am going to simply say ST George's the night and say actions. Georges on. Then I'll say mutations, George, it's OK instead of the actions door, Jess, I'm willing to simply export default Objectors off now on going to do the same for the mutations as well. Is this state okay on instead of the Index's or Jace? What I'll do is I'm going to basically import all of this so here and say import actions from actions. Then I'll import the mutations. This comes from mutations, and last I'll import the state from state. Okay. And as I told you that if you don't specify the extension than either, it will look for the finally are the four letter retained extra Js file. So here we have the individual finally, um OK, so it is going to pick up the ST George s. The imitations is going to pick up the mutations. Dargis. So you don't have to specify dark days over here. Okay, so now where they, Louisa, will basically make use off this state. Mutations and actions so far stole. I'll remove this object from here, and I'm going toe reference this state. And now I'm going to basically passed the mutations as in value for this on last 40 actions . Iran's actions okay on, we can even make it shorter. Okay, so we have done this couple of times in our project, So if your key and the values are saying you can basically have a short time like this. Okay, so you don't have to specify key value explicitly. Okay, on, let me remove the says. Well, okay, so let me see if this now and let's go to the browser and see if there is some error any sort off. So it is not able to basically pick up the store door Js file. Okay, so what I do is I am going to simply start this or what? Okay, Okay. Let's go to the browser. No, Refresh the app. And as you can see, everything is working fine. OK, on if you see some sort off. Yes, land warnings in your terminal, which are like this. So these are some methods of its have a news parameter in the less product or to a component. But if we're going to have a look at it later, once we worked with them. But it's often just continue with the view extra. Okay, so it against your application is working. Now let's go to the court base. So now here. What we want to do is we basically want Toby, find this state right application state. So what I'll do is I'll basically go to the ST George's File, and here you can simply define your state. Okay, So, for example, our application is using the product list. So he writes a product list on this is going to be in a day, and you can even defined more state like this. For example, you want to maintain order list in your application, then you can define it like this. Okay, but as often on, we just want to have the product list state. Okay, so let me clear this up. So now let's see, how can you access this state inside of the component? So what I'll do is I'll warn to the least part of door to view component on here. I basically tried to access this state. Okay, so here in the competent properties, okay, I want to basically access the state and the reason I'm declaring this inserted for computer properties, that if the state changes than it is going to be automatically re violated and fast in the computer property rights so that some basic feature of the computed property, which is, if any off its dependence detained then it basically automatically revalued the whole property. So he righted the clearer computed property called us product list. Okay, on inside of this, I'm going to simply say this dot dollar store. This is how you access this store. Then we want to basically effect this state. Okay, on the name of the state that we want to fat is product list. OK, so this is what you basically want to do. So I'm going to basically done the product list over here in this completed property. And let me also add the console log so that you can see properly. So, like me at a console log over here. All right, So I'm adding the console or so Know what we'll do is we are going to basically make use off this computer property, insert off our template. So, as you can see, inside of this V four were basically treating over products. So in the previous project, we were basically this having this products Are they using the props? Right. But currently this component doesn't have any proper okay on, just for the sake. Off having a variable. They declared the products over here. Okay, so what I'm going to do is I'm going to remove the products available from here on instead , off products I'm going to treat over the product list on this product list is a computer property. Okay, which is basically accessing this store and this state and the name of the status product list. And it is returning this. So here it will get the product list. OK, so know what I'll do is I'm going to simply save this and let school believe residency. Where do we get for this concerned? Look OK on. I'm going to basically refresh this again. Okay? And currently it says property or method products is not defined. So the reason we are getting this error is because in sort of the template, we have basically left this very well over here, which is not defined. So here also, we need to update the product list. Let me see if this now go to the browser onder first the application again. OK, so as you can see, the other is gone on currently a. So you can see on the logs. We have an empty ari off for the product list. OK, so now what? I do is just for the sake, off having something in this state. Okay, I'm going to statically port our dummy data inside of the state. Okay, so let's say our state is having to products rate. I'm going to simply see this. Go to the browser, refresh the up, and as you can see now, we have two objects over here. Okay, here is our first product. All right. On here is our second product, as you can see. So this is how you basically fetch the state. And as you can see, we also have the you implemented. So this is the reason why we are basically saying the right. Because now we have something in sort of the product list. And as you can see, if I go to the least productive you file were basically treating over the product list. OK, on this product list is basically coming from this computer property. Okay. On discomfort property is basically accessing the store, then state and the name of the state. And if anything in the store changes than discomforted property is going to revaluate on that. Some basic feature of the complete property, like if any offers dependency changes than it basically re. Willard's the whole thing. OK, so that is This was all about creating the state on accessing the state inside off your components. So I hope you were able to follow along. And thank you so much for watching this video. 47. Implementing mapState: Hello, everyone on in this world, I want to talk about one more way off feting the state which is using the map straight helper. OK, so what we're going to do is instead off feting using the global store object. What you can do is you can make yourself in help a matter that is provided by the View X. So it basically reduced on the number off lines that you have to write for fighting this state from the store. Okay, so so here I am going to simply say, import map, State from View X. Okay, So first of all, I'm going to come in this out on, Let's see, how can we do it with the map state? So I'm going to commend this out. So the way you can win is by calling the map state function on dysfunction basically returns an object. So I'm going to basically spread away all devalues their day treatments. So here you can specify either today or an object on. I'm going to show you both debates. So first of all, let's start with theory so unsettled area. You can specify the name of the state that you want to fight. So as you can see in the ST George s, the name off our status product list. So I'm going to simply copy this name and Mr Doe here. Okay, So what this will do is it is going to basically fetch the product. We stayed okay from our store on it is going to map it as a computer property. Okay, on as you can see here in the committed cored, the specified this computer property, right. So what it will lose? It will basically create a competent property with this name. Also on this is the name that they destroying confides from here. Okay, so let me to save this now and let's see. What do we get? So I'll go to the browser, open up the console as well, so that if there is a matter, we can see it, and I'm gonna build a fresh it. And as you can see, everything is working the same again. Ok, so now let's see another approach that I don't love it Waas defending an object. So what you can do is you can also defined the object. So here, first of all, I'm going to commit this out. And now what I do is I basically removed this from here on here. You can basically specify the object. Now, here you can specify the name of the computer property that you want to map. So, for example, I want don't map toe some other name, for example. Test list. OK, on here for the value. You can specify the name of the state that you want to fudge. Okay, so now this time, what it will do is it will basically fat this estate from this store and it is going to map to the test list computer property in case off a What it was doing was it was fetching the product list. State from the store on it was mapping it. So this same name computed property. Okay, so there's the difference that you get when you use the objects in tax instead of the area . So now what I do is I am going to simply replace all the reference of the product list. Better test list. OK, so here I am going to simply replace it over here as well. On we go to places over here as well. Okay, so let me see if this Now let's go to the browser on defense. The app again. OK, so as you can see again, it is working fine. Okay. Earlier there were some error because we didn't actually refresh it. But as you can see, it is working totally fine. OK, so this is how you can basically work with the map State helper. So you can basically choose it either to use it with the area or reserved with the object as per unit. Okay, So what I'm going to do is off. Nice. Going to come in this out so that even have a look at it later on. I'm going toe un command this again on Dhere in the test list. I'm going to again point to the product list. OK, on going toe toe. Put it here again. Let me see if this now nobody does that. Refresh the up again. And as you can see, everything is working Fine. So because this was all about the map stirred helper on how you can basically use it on. I hope you were able to understand it on Thank you so much for watching this video 48. Implementing Getters and mapGetters: Hello. Everyone on in this pretty of your going to understand and implement the Gators, and we're also going to make it off the map Gators helper function. So let's understand what alligators. Okay, so get us is another V off fetching the data from the store. Okay, so let's understand. What difference does it bring? Okay, so let's consider an example where you want to fight the product list state from the store , okay? And let's So you have three components that is basically using this state. So what you would typically do is you would fetch product less state. And let's assume that you want oh, only fair to those products which are in stop. Okay, so what you would do is your basically filter down the product list to continually those products which are in stock. Okay, so what you will have to do is you will have to write all of this logic in each and every component, right? But with the help of gators, what you going to do is get can actually hold this logic before providing the data to the competent. Okay, So get us basically fast digital from this store itself, okay? So it will basically, if, as the data from the state off the store and now the components will try to first do data from the Gators instead off directly fetching it from the store, as seen in the previous example. Look, so his agency get us basically helps you introducing the repeated court that you have to write whenever you want to first this straight from the store. Okay, so let's implement this now. So first of all, I'll go to the court base, Okay? On here. What I'll do is I'll try to fetch only those product list which hasn't invented staters off through. That means they're in stock. So here, I can simply say dot filter. OK, so that's in JavaScript. Function on you will get individual product over here and here. I can simply say product dart in my entry status. Okay, so let me see if this now let's go to the browser. So as you can see eyes off No, it is only showing the one product. But if you have a look at this state than hesitancy in sort of the state, we have to products right now, as you can see, if you want to fetch the same in stock products in other component than you would have to write this logic again and again. Okay, so what we will do is we will instead declared alligators instead of writing this logic. Okay, so let me, First of all, declared a gator. So what I'll do is I'll go to the file. Where are stored is defined. As you can see, it is defined over here on, apart from actions you can alter to clear the Gators. Okay, so now what I'll do is I'll declare our individual file for the Gators, just like we're doing for the other s. Well, okay, on. As of now, I am going to simply say, export default, and I'm going to simply sit and empty object is off. Now on. I'm going to import to get us over here, so I'll say import. Get this from get those okay? And I'm going to pass this. Get over here. Okay. So I can simply remove this. Okay, so I would say stirred the gators in our view. X store. Okay. On. Instead of the Gators, I'm going to define a function. Okay, so let me call it as product list, OK? And it is going to be a function. And remember that your getters basically gate to arguments. The Force one is this state, and the 2nd 1 is the gators itself. OK on both off this argument are paraded by the view extolled. Okay, so here I can simply say you're done ST dot product list. OK, so as you can see, we have the product list over here, so I'm just going to simply return it. OK, so now what I'll do is I'm going to go to the least productive view, so I'll remove this logic from here on, I'm going to simply pay street over here. Okay, So what we're basically trying to do here is that we're basically returning the filtered product list, which only have the products which are in stock. OK, so now what we'll do is we'll basically access. They get that over here. So let me first of all, coming this out so that you can difference it later, okay? And here, instead of the state, I can simply say in gaiters. Okay, so the wavy fetch is passing these dots store door, get us than the product list on this. Progress should match the name president over here, which is our get itself. Okay, on going to set the Gators here also. So let me see if this now allergic or to the browser and the fish, the app, then, as you can see, we are basically getting the data from the Gators itself. Okay? And we have this one product over here, okay? Because it's in my interest rate as it's true. And there's a logic that we added. So now, as you can see, we don't have to write different logic here in the component. It is basically present over here itself. Okay, so I have read this logic just to explain you the use case off the gators as off. Now, I'm going to simply read on the all the product list. So let me see if this now there to go to the browser again on as you can see now, we have both the products over here in stock and out of struggles with. And now, since we have implemented the ghettos, I also want to show you the example off map getters. Okay. So just like we used the map, state. We can also use the map. Get us So here I am going to important over here. So here I say import, Ma'am, get us on. This comes from do you X Okay. So know what they do. Is Westover really coming this out? Which is product list. So let me just put the comment. So what I'll do is I'll uncommon this on commend the whole function on Dhere. I'm going to make use off, ma'am. Gators, Okay. And again it except or an object as an argument, I'm going to provide theory on here. You can specify the name off the gator, and since this returns an object, I'm going to spread over all the values, that evidence. So let me see this now They're scored the browser, the fresh, the app. And as you can see again, we have the same dessert. Okay, so this is how you can make use off the map. Ghetto says, Well, okay. So I guess this was all about making use up the Gators in Sort off your application. Andi, I hope that you were able to follow along and thank you so much for watching this video 49. Set Products Action and Mutation: Hello, everyone. So in this video, we are going to implement this set product action on side product mutation. Okay, So if you remember the view X diagram, you would see that whenever the components wants toe update something, it basically first of all, dispatch in action. Okay, on that action is a singleness. That means it can do some amazing tasks such as fetching the data from the database are adding the data deluded of us, Any sort of isn't gonna stars. And once that task is completed, it basically commits a mutation. Okay? And finally, the mutations is the one which updates the straight off our application. Okay, so now here, in our case, what we want to do is we want to fetch the product list from the database, right? So what we will do is from the product list component. We're going to dispatch an action which is called us set products. And then this certain product will basically contact RST pia. And it will first digital from there. And mutation will finally said this traitor toe this state off replication. Okay, so currently, the data you see over here it is coming from statically defined in the state. So let me just clean up some of the things from our Cordray's. So, first of all, I'll go to the court, weighs on. First of all, what I'll do is I'll go to the state, dodges and I'm going to remove this particular defined products over here going to save this garbage. The browser. And as you can see, there are no products is off now because our state is empty. Okay, on what I would like to do is I would like to also clean up some of the things from here. As you can see, there are a lot of comments. So I'm going to remove this comment on I'm going to remove this plan as well, and I'll keep this to hazardous. So there you can refer to it in the future. Okay, so let me say this. Now let's go to the bazaar. So now since we're going to interact with the database, make sure that you start DigiScents server as you did in the previous project as well. So I'll go to these art and real, and I'm going to start digiscents that well. So here and citizen server, I find I find Watch flag, and then you have to specify their debut Dodgers and file. Okay, so this will basically spin up the rest ap for you as a GNC. So let me just copy this. Go to the browser. On as you can see on this end point, we have basically two products on this is present in the baby Dodgers and file. OK, so now what we want to do is we want to Augusta for dispatch inaction from at least part of component toe said the products to the state. Right? So what I do is, first of all, I'll create in action. Okay? So as you can see here, I'm in the action. So he rightly named the action as said product. Okay, on it is going to be a function. Okay, so here in the action perimeter View X basically passed the first perimeter as context. OK, so this is always available whenever you define actions. And the second is the payload, which we passed from the company. Okay, So you remember that this particular argument is passed by the View X and this is what we passed from the component. So here we need to basically fat the data from the database. So we're going to make use of the excuse to make the call. So I'm going to first of all, import the excuse. So here I am going to simply say import excuse from excuse. Okay, on what I do is I'm going to simply say Oh, wait, Axios don't get and I'll pass the u. N. So there's you are released, basically this one. So let me simply copy this. Okay? On what meaning to do is simply get the results. So here I declare available. Call us. Let desert equals this. Okay, now automakers up the over it. You need to make the function Issing. So I'm going to make this function okay on if there is any sort off better, I would like to add it in the cloud catch block. So let me I do try kids block over here, so I never any sort off occurs, such as if this is what is down, I can simply through the others. So he writes a pro new at it, and I'll pass the other object, and I remove this line over here. Okay, so now that we have president product, it's time to basically commit the mutation. So the way you can commit the mutation is by calling the commitment on the context object. So here you consider this a context dot com it okay. And here you can pass the name of the mutation, which is actually going to change the state on. Remember that it is a convention toe name your mutations in caps. So here I am going to simply say said underscored products. Okay, on hearing the second argument, you can pass the data to your imitations, so I'm going to simply pass the desert dark data. OK, so we'll have the products in sort of the desert or data. And now, since we're only using the commitment third on the context perimeter and we're not doing anything else, we're not fetching anything else. So I will echoed a structure and fetch only commit from here so I can simply say commit OK on There is no need to call. Context are coming. We basically have to commit available, okay. And most probably, you will see the core like this whenever you work with the futures. OK, so now what I'm gonna do is I'm going to declare a mutation. OK, so I'm going to simply copy this name. Okay, on will move on to the meditation file, and here I'm going to basically declared the mutation. Okay, so this is the name of the mutation. And again, this basically is in function on here. We basically get the two arguments. The 1st 1 is called US State itself, so that mutation can actually updated the state. And second argument is the payload that is passed by the action itself. OK, so, as you know, that mutations are the one which actually updates the state. So here I am going to simply say, state dot product list, and I'm going toe cited to payload itself. Okay, because in the payload were basically receiving this product list. Okay, so, no, I think we have the action ready as well as the mutation. Ready. So let's just where I took all the action from our competent. Okay, so I'll go to the least productive view component. So here, whatever like to do is as soon as our component is mounted, I would like to call this matter. So here, I'm going to declare the mounted lifecycle hook matter. And instead of this, I can simply say this dollar store dart dispatch. Okay, so this is how you dispatch inaction. And here I am going to simply pass the name of the action. So the name of the action is set products. So I said product. Okay. Okay. So no one. See if this on. Let's go to the browser now. So if I depressed the application, then as you can see now we have to products. And if I open up the console, then as you can see, initially, we had zero objects, as you can see, because the initial street was empty product list. And then as soon as our action fired from this competent, then you'd actually 1st 3 data from the database. And now we have these two products over here. Okay? And all of this logs are basically coming from the computer. OK, So as you can see for the first and the computer, Trent, when this product list was zero. But as soon as this straight off this store change, this completed property got Reville looted and hence recorded. Consul August. Well, on we got the abraded product list using which were basically trading in our template. Okay, here in the before. So we got the update the way here on the progress component as well. So let me even add the log so that you can see properly. So if I go to the action or Js file on, let me at the desert console log over here. Okay, so I learned Dickens a lot on here. I'm going to simply print out the desert door data over here. Okay, Going to say this Go to the browser. That a fresh the app again. Okay, So, as you can see, this is the log that we just printed, as you can see. So we got the result from anybody call using the excuse. So we got this are two objects. OK, so these are the new products, and then we basically commit a mutation. Okay. On the mutation finally abated the state. Okay. And when more thing I would like to show, use that if you have the view death tolls, then you can simply hurt over to the view tab over here on. Then you can go to the View X. Okay, so here you will see the mutations that are running in Sort off your application. Okay? So let me just fresh the app, and then you will see that water off mutation actually operated the state. Okay, So if I go to the base state over here, So as you can see, the state in our product list was an empty area. And if I go to decide product mutation, then you can clearly see what kind of changes that it bring, right? And if you want to Basically what? Or go back to the previous state. What? You can simply do it. You can symbolically, Kandarian What button over here then. As you can see, we are basically able to time travel. OK, so this is how you can easily the book your application state using the View X in the view devils. Okay, we're going. So this was all about calling the action from the component and then committing the mutation from your action, ok? And finally updating this state. Okay, so this is the standard way off doing stuff on. I hope you're able to follow along on. Thank you so much for watching this video 50. Add Product Action and Mutation: Hello, everyone. So in this video, we're going to implement the product action and the mutations. So basically, the idea is assumes the user is done filling up the form on as soon as it clicks on that product. The basically want to fire an action, and as soon as it is done adding their data to the database, the night is going to commit a mutation on. Finally, the mutation is going to update the straight off our application. OK, so let's start implementing this now. So first, all what I'll do is I'll go to the ad product or view, and here on the product method, which is called whenever user clicks on that product burden. Okay, so after the formulation, here is where we want to basically dispatch an action. Okay, But first of all, let's create the action. So I'll go over here in the action filed on here. I'm going to declare a new action, so I'll call it as our product OK, on this is going to be a function okay on it is going to be anything function because they are going to make use off the keyboard inside of this. So far, stolen the structure to commit on. I'll also get the payload that will pass from the competent on here. I'm going to simply say of it. Excuse not post on. I'm going to simply copy this. U R l on base turtle here. And I just passed the payload inside of the body off the request. Andi, we'll get the dessert. Well, it started here in the variable. Okay, on what I'll do is first of all, let me I try kids block. So that if any sort of editors there, I can simply catch it. So here, I'll see it through new, All right? And I'm going to move this over here, and as soon as we get dizzy from the endpoint, we're goingto comedy mutation. Okay, so let me do it now. On for the name of the mutation, I'm going to call it as at underscore product. OK, on. I'm going to simply pass the desert dot date over here. Okay, on. Now let's make this magician. So I'll go to the mutation dot Js file on here. I'm going to declare this magician and again it is going to be a function on the first argument that it receives from the View X store is this straight itself. The second argument is the payload that it receives from the action on here. I'm going to simply update the state. So here l said ST dot product list. Now, this time I'm going to push this new product. Okay, so I'm going to simply push this build. Okay, so now you know the idea, right? How do you work with the store? So you basically first fully create the action and you call the mutation from here, Ok? And finally the mutation objects the store. Okay, so now that we have the action in the mutation ready, let's head over to the ad product or be a competent on Dhere. I'm going to simply say this dollar store Dark dispatch on the name of the action I want to dispatch is a product on. In the second argument, I can pass the payload. OK, so I'm going to simply copy the payload from here. Ok, so as you can see here, we have already prepared the data in the previous project on. That's what we need. Okay. Presidency. This is the pillow that I'm going to pass name price Brown. And in the interest rate us on, we no longer need this now, so I'm going to remove this hospital. So let me see if this Now on, let's go to the browser. Okay? And if I difference the application on here, I'll open up. The control is well, so that if there is some other you concede, so, as you can see currently, we have two products in artery Davis. All right, so now if we had the heart of product from the Eid product from it should appear over here . Okay, so let's go to the home bitch on First of all, if I click on add product without entering anything, then we should have the proper form validation. So as you can see and I think we forgot to add the other message class from the previous project, so let me just quickly define it over here. So as you can see for the other messages, we are basically making use off this other class. But it is not able to find this styling for the same. So I'll go to the abduct view and here for the other class, I'm going to simply say color as, but I'd Okay, let me see if this will put it closer. And as you can see, the color is applied now. So let's try to I d product now. So here I am, going to simply say, new four months shirt for the price. I'll say, for example, $99 for the brand. I'll say, for example, return England on for the Inventor Street. Us. I'll say in stock. Okay, No effect. Ligon had product. It should fire an action which should add the product in your database. And it will basically committed mutation which will obey the state off a replication. Let me click on that product. And if I go to the product list, then if If I scroll down over here, then as you can see now we have this new formal shirt edit into our database, okay? And it is abated in state as well. Okay. And even if we check in the David Ortiz and file, then as agency, we had this new entry over here. So because this was all about creating the art product action as well as mutations on, I hope you were able to understand it on Thank you so much for watching this video 51. Delete Product Actions and Mutation: Hello, everyone. So in this video, we are going to basically implement They relate product functionality. So again, here we are going to fire the action which is going to call the mutation and it is going to update the state. So let's start creating the action for the late Humbard. Before that, I would like to quickly update the way because our cards are looking really big. So what I'll do is I'll go to the least productive You fight on Dhere, I'll give it a minute off 30%. And I would like to also give it a Maxwell it off 30% so that they don't explain more than this. Let me see if this now according to go there again, Yeah, this looks good. So you let's start implementing the actions. So first algo difficult, basically production. So this time I'm going to simply copy this ongoing tok sit over here on Just do the editing in the existing code base. So here and say Well, it product OK on you will really be the same and the extra TV request time will be delayed and we basically want to pass the I d in the Ural perimeter. So here, I'm going to make use off the back picks. So let me the simply remove it. Okay? You can apparent it with the concatenation as well, but I'm going to make it off the back place. So here I am going to simply say payload, okay? And the payload we will send here is the idea itself. Okay, on the the mutation that we want to call will be called us The great product. All right, on Dhere. I won't go past the paler itself. Okay, on I just a bit over it because we don't need the result from here. Okay, so what I'll do is I'll go to the mutations file on Dhere. What I'm going to do is I'm going to add this particular mutation, which is delayed product. Okay, On again, it is going to be a function which is going to get to arguments. State on deplored. And here I am going to simply say ST dot product lease equals ST dot product list dot filter. I'm going to make use of that filter method, so there's in javascript matter that can be applied on the area. So here I am, conducing play first will get the individual product. And I want to written only those product whose I D is not a colts took this paler. Okay, Where simple. Let me say this now. Now, let's go to the least productive you. And as soon as this the late product method is called, I'm going to simply dispatch in action. So if you're all set this or dollar store door dispatch on, I'm going to positive name off the action. So the name of the action is the league product. Okay. On for the perimeter. I'm going to pass this product idea that we are deciding over here. Okay, so we're basically sending this program from here itself. Okay, on were basically passing it to the action. So let me see if this Now, let's go to the Belgian refresh the APP. So no, If I delete this new formal shirt, let's see if this get deleted from the state on. I'm also going to open up the control so that we can see if any of theoretical. So if I click on this the nez agency, it is deleted. Right? And even if you check indeed, database. So let me just go to the debate Georgeson. As you can see now, we only have the toe products on. That report is deleted from their debate. Georgeson as well. Okay. And we can even drag this mutation in the view Devils. Okay, so let's go to the View Devils. So, for example, if I delete this product as well, we should see a mutation over here called as delete product on First of all, let me to show you the existing state. So as you can see currently, we have two objects insert off our state. Okay, now, as soon as I click on this, then as you can see, this mutation is executed, and now we only have one state left. OK, so as you can see here in the product list, we only have one object. And if you want, you can reword also. Okay, So this is how you can basically debug your application with the U X devils, and it makes it very easy for you to double your application. Right? So that's it for the delete product functionality. And I hope you were able to follow along. And thank you so much for watching this video 52. Update Product Actions and Mutations: Hello, everyone. So, in this area, we are going to implement the update product actions and the mutations. So, as you can see here in the least product component, we have this upgrade Porter component as well. Ok, so we're going to create the actions and the mutations for their user again. Updated product data. Okay. On as you can see, instead of the great product form, we already have developed a shin applied. All of it in to do is to simply call the actions and imitations. Okay, so first of all, what I'll do is I'll go to the lease product page. Okay? And as you can see, we have included the update brought a competent over here on. Now, we don't even need to listen for the object part of event, because we're not going to emit events. So I'm going to remove it. Okay. On dream word from here as well. And now what I'm going to do is I'm going to go to the object product review file. Okay, so this is the place where we basically want to call the action. OK, so first of all, let's create the update part of action. So I will go to the action over here and simply going to copy the existing court on just going to make my no tinges saltines in Name is update product. Then we basically want to hit the port ap A Okay, on as far as the payload is concerned, we would get the full abraded product object on. We would also get the idea from it. So basically leaving it to pass the ideo here. So here I am going to say payload dot i d on in the body. I'm going to pass the whole payload itself, okay? And I'm going to get the desired away here. Okay? And I'm going to pause this desert as a payload. Tow a mutation. Okay. And the name of the mutation will be update product. Okay, on as a pillow, I'll pass on dessert. Dark data. OK, now let's create this operate product mutation. So I'll go to the magician or Js file on here. I'm going to declare good product magician, which is going to be a function on first off a little, basically have the state argument over here. Then I'll have the payload that I will receive from the action. So here. What I need to do now is I basically want to create a new list from the existing product list from the state. Okay? And that mulish should have the updated product that is being upgraded over here. Okay, so the operated product information is being sent as a pillar from the action. So here's what I'm gonna do is I'm going to simply say state dot product list, okay? And he runs a ST dot product list. Dark map on in Egypt original. Get just one product. OK, so here I can simply say if the attrition product I d. Is equals equals updated product, I d then done the update product. We just payload itself as simply to Dundee brought up, Okay, So if you're not very much family with the map, so what it will do is first of all, it will a trade over this array, which is product list, and in a generation will get one product. Okay, so what we're doing is we're basically checking if that attrition product I d is equivalent to the product that is just being operated by the user. So if that's the case, we basically want to have the new information off that product. Not the old. Okay, but for all the other products. I just want toe written the existing data. Okay, Because that has not been changed. The only product that has been changed is the payload that is being sent over here. Okay, so this will be circulated on annually having the new product insert off it. Okay, so that's what I'm trying to do. So let me see if this now on. Since we have the actions and the mutations ready, they can head over to the object for a lot of you file. And here we can start calling the action. So here, I'm going to say this dollar store or dispatch on the name of the action is let mingle detection file. Okay? It is a great product goingto pasted over here, then for the payload. I'm just going to copy it from here. Okay. On Bay Street over here. Okay. So that's all I need, and I just get rid of this thing. Okay? So let me see if this now and I think we're good to go, So let's go to the browser. Let me refresh the application. Let me open up the developer control as well. And I'll open up the view Deftones on inside of this, I'll open up the view X so that you can see properly. Okay, So as you can see, currently in sort of the state, we have this one object. So first of all, what I try to do is basically update this invent illustrators off this product from out of stock to in stock. So let me just upgraded. So here I am going to simply say in stock. And if I click on OK, then. As you can see, the product is a great over here, and we also have this mutation being fired, which is a great product. So what this mutation has done is it has basically updated the state off the product and it has basically operated, then went to ST Distrito. Okay, So presidency, our update product is working totally fine. And let me try to update other fields as well. So, for example, if I increase the price toe $200 let me click on OK first against you again. This mutation is fired on. We have this Ah breaded price over here. And even if you check in the debate gorgeous and file, then you will see that we have a breaded information over here, such as the price and then interest us. Okay on. If I don't provide any valid fields, and if I click on OK, then it is not going to fire the mutation because we have the formula later over here. Okay, so I guess this was all about the update product functionality on. I hope you were able to follow along. And thank you so much for watching this video. 53. Implementing mapActions: Hello, everyone. So in this video, we are going to implement the map actions. So, just like we have the map street and map Gators method for working with state and the others Similarly for the actions, we have my affections. So let's just see by example. Okay, So for the affection, I'm going to implement the product action and replace it with the map actions method. Okay, so let's just go to the court base. So I'll go to the airport of the review file. So as you can see here, we are dispatching the air protection. So what we need to do is, instead of this, we need to call the map action matter. All right. So, first of all, what I'll do is I'm going to simply import the map actions. Okay, so here also import my affections on. This comes from you, X. Now, what I'll do is I'll go to the methods on here. I'm willing to simply say map action. Okay. On in sort of. This is a parameter. You can pass the name of the action in sort of the areas. A string. So here I can simply say add product. Okay, because This is the action that we want to call which is defined over here in the actions or fight as against the air product. Okay, I need basically returns and objects, so I'm going to simply spread with this. Okay, so there you go. This is your product method. Okay, So now how can you be silly called this particular time? All you can do is you can simply call this matter by calling this daughter at product. OK, now, since we already have our product method over here, I'm going to change its name. So here I am with you. SIMPLEs, add on here also. I'm going to simply said, because on the click of the button were basically first of all, calling the ad matter. Look it. And as soon as we have the formality data, Venuto basically dispatch an action. Okay, But this time we're going to do it with the map actions, not the store door dispatch method. Okay, so what a little here is our first of all commenters out. Look it on the way. You can be silly called the map. Action is by calling simply this dark ad product. Okay, on. Remember that this news to match with the map action different over here. Okay, Now, instead of this, we can pass. The argument is well, because the election is expecting an argument, as in payload. So I'm just going to simply copy this payload on simply going toe pestered over here. Okay? And yet they're told that is all required to basically call them affection. So let me see if this go to the dozer. Refresh there. Now, if I go to the product list, as you can see currently, we have one product. Now, let's try to wear the product. And this time you're basically using the map actions. Okay, so just try this now. So here, for example, I'll say sports shoe for the presidency. $100 for the Randalls and Nike on for the invent trails in stock. Click honored. Let's go over here. And as you can see, it is I did over here, right? So our map action is really working. Fine. Let me open up. The consul is Well, as you can see, there are no other says. Well, so there is. This was all about the map action help perimeter that I just wanted to show you on. I hope you were able to follow along. And thank you so much for watching this video. 54. Vuex Strict Mode : Hello, everyone on in this video, I wanted to talk about the strict more off the view X store. So to know you're basically falling the right process. We just tow dispatch in action from the component which will call the mutation and mutation will finally update the state. Also this way, your application status trackable using the View X store using the mutation. Right. But what if you pathetically try toe update this state from the company? Okay, so it's off now, the you have one stopped you from doing so, But let's say you want oh, strict yourself toe accidentally update this state directly from the competent. So how can you do it? So there is a property available on the view extort. Okay, we just call this a strict and if you said it true, then it is not going to allow view toe up, get this state directly from the company. So let's just understand by example. So as you can see, here we are on the airport component Now, as off No, we're dispatching the action. But let's just try to directly mutate this state from the competent itself. So what I'll do is I'll go to the core base, then I'll go to the product arcview file. So as you can see here we are displacing the action. So now what? I lose our lyrically update this state from the component itself. I'm not dispatch in action, so let me just come into soap. OK, so he rented this dart dollar store dot state dot product list, which is our state. Okay on, let's say for genetically push. So this traitor's off now. Okay, let me I dig in so long as well so that you couldn't see properly. So here are window simply I d console log and I'll bring this out. Okay, Who gives a legacy of this on? Let's go to the browser's refresh the app like me Open up. The consul is well And if I tried to wear products such as new product, I learned that the place has 100 that the parent, as new said at the end of entry, And if I click on add product then as you can see his are concerned look OK on this particular product is addicted the state right, but we don't want it already because we don't want to mutate this state directly from the company. So let's see, How can you restrict it? So that's where you can make use often strict property on the view. Extort. So let me just go to the store. Fine. Okay. On here, you can specify additional property called as strict. Okay. And here, outside to look through. Okay. That BC of this corporately browser, the flesh, the app. And no, If I tried to update anything over here, and if I click on at product, then as you can see, we haven't added on the console and it says, Do not mutate. View extort state outside the mutation handler. OK, so as you can see, this is how you can stop changing the state outside of the mutations. Handler on one more time would like to show you is that you should use this particular thing. That means this particular configuration Onley in the development would You should not use this strict more in the production. Okay? The reason is that there's a strict Moore's apply our deep what toe the view extraordinaire eight on. It's not been good for performance perspective in the production. More so, what you gonna do is You can simply make use often in woman available and you can check the environment very below here. So here I am going to simply say process dart envy dark nor the envy Nord equals production . Okay, So what this means is that if the Nordion Vizner production, then only this strict more will be applied. Otherwise it won't be applied. Okay? And if we're wondering there, this naughty and we will come from. So there are two basic environment variable that are provided by the U. C L A itself, Or you can say they are basically made available to a replication by the views Align. The 1st 1 is the nerdy and B, and the 2nd 1 is the basic model which is used here in the older Dodgers for less urgency. So let me one try to console log this environment variable so that you couldn't see properly. So I'll go to the moon Dodgers filed okay on dime aiding this just for the logs. So here and second soul not log on here. First of all, I would say northern the scoring envy. So he rides a process I don't envy. Door Nord underscoring envy Then I heard the base. You are Elizabeth. So he didn't say base under school. You are. Okay. Let us see. What do we get? Okay, I'm going to save this. Go to the browser. Refresh the application. So, as you can see, the North involvement is development is off now. So this Nord involvement is made available by abuse, Eli itself. You can add your own environment variables which we're going to see in the upcoming videos . And as you can see, here is the base. You are limited. Slash. So I guess this was all about the restricting. The state are sort of the mutation handler by providing the strict property over here. Okay, so that's it for this video on. Thank you so much for watching it. 55. Managing Spinners and Loader: Hello, everyone. So in this video, we're going to implement this Spin us and the loaders in an application. So we would like to implement the spinners on the places where we have some of the action. Such a sad product. Okay, So as soon as the user clicks on that product, we can show a spinner over here. Then also in the case when the user tries to go to the product, lisp it. So as you can see, there is some sort of delay by their time, which we get the products on in that particular time. The a call is made to the last man point. OK, so we can show a page in order over here as well. So let's try to implement it now. Now, for the spirit of the Lord, I'm going to make yourself a bush, a prominent Carla's spinner. So let me just show you quickly if you go to the components on Dhere on the spinner. So, as you can see, this is the kind office we know that I want to implement. So what I'll do is I'll just grab this board ship spinner competent and let's start implementing it Okay, so first of all, we want oh, added on the product component. So I'll go to the airport. A competent view on Dhere. We basically want to ride it, right? So I'm just going to read it over here, all right? And I would like to give it a brilliant off light, so I'll say variant equals light. Let me see if this go to the browser and let's see, How does it look? So this is how it looks now it is looking quite big. So what you can do is you can make use often small attribute that is provided by the four steps spinner component. As you can see now it is small. OK, so number if you want to do is we want to be silly conditionally show this. Spin it. Okay, so as soon as the user clicks on, add part of Britain video too short and then hide estimates it is done. So what I'm going to do is I'm going to make yourself a 1,000,000,000 variable to show and hide this spinner. So here I'll go to the court base on here. I'm going to declare Are willing Variable called as Show I brought up spin up on initially , all set to falls. Then I'm going to make use often Be if attribute over here and here. I'll makers off this variable, which is show I'd product Spinner. Okay, so let me see if this now there's got to get closer. And as you can see initially it is hidden. So as soon as the user clicks on add this particular method is called on were basically dispatching inaction from here. Right, So we need to show the spirit as soon as this function is called on a minute to height as soon as this particular action is completed. So how do we know that this action is completed? So it against a here It basically returns a promise so I can make use off the other key word. Okay, so here I will. First of all, subject total as soon as our form validation is success. Okay? And as soon as this particular promise is fulfilled, I can hear, say this, start short. Brothers spin it as false again. Okay? And for some reason, if this particular action fails, that means a legal protection over here. Okay, so let's say this particular action fails for whatsoever reason such as this are what is down or anything so well, first of all, get the adult over here in the catch block, and we are basically throwing the center. So if this produce direction towards the other, we need to catch it right on in that guy's block the again. The two cited toe falls. Okay, so if the there is in the saddle, rarer still, the loader should stop appearing, right? It should not keep appearing for the in finite time. So what I'll do is first of all, wrapped everything inside of their trinkets block. So here I am, Windows implicit. Try goingto based everything over here. Okay, on. I'm going to make us off the catch block a spell instead of this will get the other object . And in this I can simply first ofall console, log the other. All right on then. We can simply say this toward short product spin. Arrest falls as well. Right? Okay, so let me say this on district now, so I will go to the browser, refresh the application on as you can see currently, we have two products. So what I do is, I try to add new product. So here I am going to simply say, New sports shoe for the price. I'll say 100 and $50 for the Brennan's in 90 on, for example, if I say in Stalk and if I click on add product, then we should have the new product over here in the park list on the spindle showed appear as well. Okay, so let me click this. So as you can see, we saw this peanut till that time the action was running. And now if I go to the product list so as you can see, this is a dead over here. Now, let's suppose that outside what is done. So I'm going to First of all, stop decent service. Okay, Now let's try toe on the application, okay? And I'll open up the control as well so that you can see the other. So let me clear this now on. For example, if I had anything, for example, new formal shirt, $500 brown this Peter England on inventing out of stock. No. If I click on product, then as you can see, we have this adult over here, which is printed from this at product. Competent, As you can see, we control longer over here so you can see again we have had in the larder. If there's no matter as well. So let's start this it right back again. And now we're going to do is we basically need to implement in order on the list product page. So here we basically want to show the order on the on the center of the page. Right. So what I'm gonna do is, first of all, I'm going to copy this spinner from here on, I'll go to the list for a pitch on Dhere. What I'm gonna do is inside off this porch Shep card. I'm going to pace the board. Ship spinner removed this small attribute from here for the brilliant. I'll say secondary. Okay. And as off No, I'll remove this condition. Okay, so let me see if this now on large, order the browser. So as you can see as authorities appearing over here, but we need to place it in the center. So what I'll do is I'll go to the abductor view on declare ceases class over there, so let me just go to the court based. First of all, let me declare the class over here, so I'll give it a class off beige in order. And let me go to the abduct view on. I'm going to simply at this class over here. So I gave its position top as 45% from the left as 45% is well, and I'll give it a position off. Absolute. Let me see of this article, Dozer. So, as you can see, it is appearing over here. Now they want to be silly. Conditionally hide it. So what, Lewis, I'll just go to the less productive view on going to declare of a table over here called as show beach in order initially subject to falls going to apply TV if directive over here on going toe make use off this variable. So as you can see initially, dissident. Now, as you can see, we are basically having amounted lifecycle hook over here on. It is basically calling this action which is said products. And this is the action which is basically setting the products to the street and which is then made available. Okay. And we're basically fighting the progress from the Gators. Right. So what we want to do is we want to show deal, order our killer time. This action is running on. As soon as this is completed, we want to hide it. So again, this dispatch returns are promise. So I'm going to make it off the other key word on to make use of the word cured I need to make this function is ink on. What I'll do is I'll put everything in their try. Catch block. Okay. On Dhere in the catch block. I can simply say error and festival here. I'll console, log the other. All right. So first of all, as soon as this lifecycle hook method is called, I'm going to simply say they start show page Order equals true. Okay, on as soon as this promise is fulfilled, I'm going to start it toe falls. And in case of any other, for example, if the action basically throws any other than also we need to set it falls. Okay, so let me say this now and let's see. How does the U I look now there to go to the browser and refresh the app so as you can see , We see the Lord er for defections off second till the time the data has been loaded. Okay, but one thing you would observe is that the text and the loaders are appearing simultaneously. So let's fix this. So what I'll do is I'm going to add another condition over here, and I'm going to say when the show Paisley Order is false. Then only show this text, okay. And of course, when they land this less than one, let's go to the browser. Let's try this now. Okay. So this looks good, as you can see now, we don't see the text and the loader together. Okay. On the text I'm talking about is this one no products phone. Okay, so that's it about showing the spinners as well as the loaders inside of our application. Ah. Now I hope you're able to fall alone on. Thank you so much for watching this video. 56. Implementing Mixins and Toast UI: Hello, everyone. So in this video, we're going to implement the toast as well as we're going to understand what I make sense in view jizz. So first of all, will implement a toast in places such as our product or maybe even Billy it product. And a bread product is well okay on. We want to basically show the toast on the use directions again. So let me just quickly show you what kindof toast we are going to implement. So let me just head over to the components. Then if I go to the post over here, as you can see here is their tap. So this is the kind of post that we won't implement. OK, now there are various tributes available on their toes, such as the villians on even the order delay and things like that Title messages. Okay, so let's see, how can you basically implemented toast? So, as you can see over here on, this is how you can basically call the toast matter on the board step ghost object. So I'm going to simply copy this one on Bay Street over here in the corner base. Okay, So first will implement this in the ad product audiophile. So as soon as this action is completed, Okay, that means our product is I did successfully. And here we basically want to show the door straight. So I'm just going to Bay Street over here. Okay. On. Let me simply turn this as well. Ok, so here is the first of all Mrs Dare you on social on here. I'm going to say product I did successfully. All right, Onda here in the title, I'm going to simply say success. Okay, on for the region as off? No, I'm going to simply toothy success. Okay, so this were in facilitator mines the color off the toast for the solid ill said True. So this solid property doesn't make the toast transparent. Then I'm going to simply say orto hide delayed toe 1500 milliseconds on there is another property called as toasted position. So let me to show you residency. If you're basically majors off this, be hyphen closer, high front, operate. Then it is going to basically show it on the top rate. So let me simply add this as well. So here I am goingto simples a toaster and I will pass it in this spring. Okay, so let me just say this now on, Let's fry tour on this. Okay? So I'll go to the browser, go over here in that application and tried to wear the new products. So here, I'll say, for example, you're my shoe prize. $100 but aren't Puma. And when train, stock and non fake click on this, let's see what happens. So as you can see, this stores appeared for the 1500 milliseconds. Okay? No, let me also try to run the case where we get the other. Okay, So, for example, if this action fails, then we'll get there in the catch block on. Let's say I want to show the message in their toast. So what I do is simply copy this, okay. On Bay Street over here, on going to simply teens the message, as at a dark message on gonna change the title toe. Better on the variant, too. Danger. Okay. Save this Now, Andi toe, generate this particular case I would like to stop. Are resting point server Okay on. Let me refresh the app again. OK, now, let's try to add the product. So she arrived several examples. New product. Four players $100. Bronner's new okay in stock nine. If I click on add, let's see what happens. Says agency Now, we haven't edit posts and addresses network at it. Okay, so this matter is coming from this object president in the cat's block. Right? So we are fetching the Aramis is using after dark message. Okay, now, we basically want to implement this toast in multiple components. Right? So what we have to do is we have to basically copy the same gored and pasted over there. Okay? But that's not an efficient solution, because you are essentially putting the court. Okay, so how can you share the same functionality across multiple components, so that can be done using Nixon's? So let me show you water makes sense. Okay, So what I'm gonna do is I'm going to create a folder in the SRC. Okay, so here I'm going to simply say, makes sense on here. I'm going to create a new file called s My mixing. George's okay. And here I'm going to simply say, export default and object that stuff now and here. I'm going to declare the methods right on. You can even declare the computed properties data as well. Okay. Even the lifecycle hoax that you want to share the grass Multiple components. Okay, so those will be accessible, and I'll show you how it will be accessible. So it's off now. I'm going to simply exporter method. So let me call it as short toast. Okay? You can name it. Whatever you want on as an argument, I basically would like toa receive some of the argument from the competent, such as the message and the title. All right. And what I'll do is I'll simply copy this logic from here on going to paste it over here. Okay? And I'll replace this static message with their dynamic message that I'll receive as a perimeter dysfunction on. I'll also the place their title. Isabel. Okay, Now for the variant, what we can do is we can decide the villian on the basis off title. Okay, so one thing that we will keep consistent across our application is that when you were showing toast, we will either send the success during or the Bavarian. Okay, so here I can simply say, if data his equals equals success. Okay, So if this is true. Then show the success very in otherwise show their danger. Civilian. OK, quite simple. Let me say this now. Now let's see. How can you basically include this mixing into your company? Okay, so the way you can do it is by declaring another property on your view instance and you can simply say, makes sense. OK, so let me to show you, for example, here I can simply say, makes sense. Okay, on it is going to be another. And here you can basically passed the mixing. So here I'll say, import my mixing from at the red slash make sense slash my mixing and all you need to do is simply passed this mixing over here, which is my mixing. Okay, on. Let receive this now alerts if there is some error in the console or if it is working. Fine. So, yeah, I think it's working. Fine. Now what I'll do is I'll basically called the mix in, so I'll go over here. Okay. On here. I'm going to simply sit this dark. The name of the maximum. It is short post as defined over here. As you can see now it is expecting to argument the message in the title for the message. I'm going to pass this one, which is product, and it successfully for the title is a success. Okay? And I'm going to delete everything from here because it is no longer required. Okay, so this is handled by this mixing itself. Okay on we can do the same thing in the air as well. So let me just show you so I can replace everything from here on for the message. I'm going to simply pick it up from other objects. So here I am, going to someplace after dark message on for their title. I'll see. And I can t move every sort of confirmation from here as well. So yeah, I think this looks good on. Let's just try this in the browser. So let me see if this go to the brother, refresh the app. Now let me try to add a new product. Karla's sports shoes added US prizes $200 but aren't as I did us, for example, in winter is in stock. No, If I click on add, then it's off noticing that work together. But our post is working fine on that together because we have instructed DigiScents Herbal . So that instructed again. Okay, we basically forgot to started. Let's go to the browser again. Refresh the app. So, for example, if I now try toe de product again, sports sure did us $200 browned as they need us. For example. In stalk knife, I click on air. Let's see what happens. So as you can see, we got this success most over here. It is product, and it successfully. Now, the interesting thing is that this toast is going to be used by many off the components. Okay, not some off the conference, many of the complaints because it's certain common functionality that almost 90% off your application component will be needing this particular thing. Right? So this is how you basically implement the toast and take over your logic inside off the makes sense right on the way you gonna academics is by declaring this Maxim property over here. Okay? No. One more thing I would like to show you is that if you're mixing is required by almost every component north 100 person. But let's at 90% author component, then it is a good idea though I start this mixing as a global mixing instead off locally importing in each and every company. Okay, so, for example, we are importing this particular mix in in the airport a competent. Okay, so now we want to show this on the object part of component as well. So we were again include this over here as well That on the list product as well, we wouldn't put it over here as well. Okay, so now imagine that you have 20 components, right? And let's say eight incumbents needs this particular mix in, so it's not in good idea to import this particular mixing in all the 18 components. Okay, So rather, in those cases, where you can do is you Can I start this mixing globally and start off including it over here. So let me show you, how can you basically they study or mixing globally, So all you have to do is simply go to the mean Dargis fight on festival importante mixing. So here I am, going to someplace import my mixing from Nixon's slash my mixing. Okay. Now, the way you convey start is by simply saying, If you dart mixing and you can pass your mixing over here. Okay, Let me see if this now on what I Lewis, I'll remove this particular local import from the art product component. Okay? And let me say this. Now let's go to the browser again to face the app, and I'll quickly add a new product. So it's a new product. 9 40 prize answer. For example. $88 for the barren isles in Nike on. Let me simply try to wear disrupt. So as you can see again, the toast appeared on this time, and this particular method is called to the global Mixon. Okay, normally, local one and we can even remove this import as well. Okay, no longer required. So now that we have implemented on the airport a component let's also implement in the let's put a component as, well, a subject product competent. So first of all, let's go to the least product, okay? And I'm going to simply copy this court for the toast. Okay, let's go to the place where the component. So here are First of all, let's implement on their delayed part of functionality. So, as you can see here also were disputing inaction called distillate product. So here also, let's show the toast whenever this delete operation is successful. So I'm going to first of all of it over it. Ondo, make yourself heard. I'll make this function Issing. Okay, on who gets theater? I learned a try. Catch block and simply consume. Lock the door over here. All right, on. I'll move this statement over here. All right. And as soon as the billet product is successful, I can simply say addict deleted successfully in case off any other I can say at her dart message for their died. Alliance at a. Okay, but this looks good. Let's try this on the great product. OK, so I'll go to the product list. Refresh the app on. What I'll do is, for example, I'll try this on the new product name. So as soon as I click on this deal it product the nez agency, we get the message product military successfully. Okay. And if our sir what is down, for example. Okay, let's just try this. Now, let's see. What do we get? So they conceive Igor Distrust for the night or Guetta, right? So everything is working. Fine. Let me start this over again on now it's time to imprint on the Abdic Pearl. Okay, so let's just do it. So I'll go to the court case on simply going to copy this particular code, go to the update part of competent. Now, as soon as this upgrade product action is completed, first of all, I'm going toe wait for it to complete. Okay, on our function is already facing, so that's good. Now I need to basically that this inside off the track, it's block. So let me do that. So for stole, what I'll do is I'm going to simply put everything over here in the tri Kids block. All right? On going toe pestered over here. Let me think of this as well and gives off any other like me. Console log theater. All right, on for the toast. I'm going to simply copy the court from here. Okay, on. First of all, if this results so success there, Rankin simply are sure goes to get the message product updated successfully on in case of any other. I can simply say this dot short post on, I'll pass the era as a title. Okay? Also, the Adam is it. Okay, so yeah, that looks good. Let me say this on by this. Now refresh the application on hopefully our existence. Our resident ing yesterday's money. Now, for example, if I try toe, get this product on, update the place toe $100. So let's see what we get. So, as you can see, we got the success, Mrs. And we'll also get the other Mrs in case there is some error. Okay, So you guys, this was all about implementing the toast functionality into our application. And I hope that you, like, did on. Thank you so much for watching this video. 57. Environment Variables: Hello, everyone on in this video wonder talk about the environment. Variables envisages. OK, so as you can see here in election, we're basically having some sort off. You are ill. You are resting point. Now let's suppose there. Do you want to fight to this particular thing from the environment? Variable instead of So how can you do it? So view Broich's of A to manage or variables in sort of the environment. So let me just show you so few sorts for view. Jay's more than environment. Then you will see this documentation and as first. But over here there are basically three Morse by default development test in production. So whenever you run and came round, so their development more is used. Okay, on whenever you don't and b m than for building the project, the production more it is used. Okay, so what you gonna do is if you want to create more specific in woman felts than what you can do, issue can seem bleak. Declare filers Doherty, and we don't development or dart in regard production. Okay. And if you want to lord particular environment in all the cases, irrespective of the Mort, which is developmental production. Then you can simply make use off their dirty, and we Okay, so we're going to make use off this now, but even also create more specific in warm and file, for example, for the development and the production separately. Okay, So what we do is simply go to the court base on festival. I'll just create a new file over here called us Door PNB on. There is one rule regarding our declaring your variable in their daughter and we file, which is that you have to specify prefix which is view underscore app. Okay, if you don't specify this perfect than your environment, variable will not be loaded by the view, Seelye. Okay, so let's just do it now. So festival all you have to specifies the view underscore perfect. And then you can simply name the environment, for example, Base, you're OK, and I'll copy debates Wirral from here. Okay. And I wont to simply pestered over here on what a loser makers off this involvement available in the actions. So here I can simply say const base underscore you. Waddle equals process dot envy dot name off this whole variable. Okay, Right. So Now I'm going to make us off this variable over here. So first of all, what I lose, I will remove this. Okay on. I'll convert this to back picks. All right, on going to pass is as an variable over here. Okay, on. Let me simply copy all of this thing on Bay Street over here as well. And I'll do the same thing about here is well on going to remove this back. Take from here. Let's do the same. Over here is well, so know what I'll do is I'll basically start this. Edward. Let's do it now. Okay, on. Let's see if we get this particular thing walking on. Let's go to the browser on the first day up. Okay, So let me open up the consul Izabal and even the night hooked up. So that begin. See, the if the request are being fired. So I literally product list. And as you can see, everything is working fine. Ok, we are basically hating this popular You are that when this sad little action is working Fine. Okay, so we're getting this base you are. And let me when our deacon so lock so that you can see it properly. For example, if I did over here just to show you see if this go to the browser, refresh the up. Go to the console. The residency are basically at least Esther to be Colin Slashers, local host. Call on 3000 which is coming from this dirty envy file. Okay, so you guys, that's it for the menacing and woman. Variable on. I hope you're able to understand it on Thank you so much for watching this video. 58. Fixing ESLint errors: Hello, everyone. So in this world I just wanted to quickly fix Theis later that we have in our project on you should do it violent Developing. Your project cannot at the end, but I just kept it for the end because I don't want it to stop the flow off our project. So there are a couple off warning such as here. The payload is not defined. And the rule that is applied here is the no. One use words. OK, so we'll fix this now on. You can see this. Yes, land that whenever you're running the project on, if you want to run it explicitly, then you can simply don NPM or on land. OK, so if you see in the project than as you can see here we have the link script defying. So this will also give you the same hair. Is that our president in your application? So, as you can see, here are a couple of feathers, so let's just fix them one by one. So if I started seeing my affection is defend but never used. So what I do is I just go to the ad productive. You fighting okay on I'm going to simply comment this our heads off now. Okay, Next we have in the less productive you let me just go over there as well on going toe. Come in this boat off. Out. Okay, Next. If I see at the end of that which is below in the Gators in the action and the gators. So let us go to the action. So, as you can see here, this side protection is not using the payload swell. Simply remove this variable over here. And if I go to the Gators, then we're not using the second argument which is getting itself okay. So as of now, I'll to move these as well. Knowledge had over to their terminal on again. I'm going to simply it on PM Run Lind So you can see here. It says Nolan better found on that suit. Their tell you basically fix it. And that's what I wanted to do for this video on. Thank you so much for watching it 59. Building Vue JS App in Production Mode: Hello, everyone on in this video we're going So see, how can you build your view? GIs application in production. So whenever you build your application in the production using the NPM run build command. So, as you can see on the and payment build, it will be squeeze on the view Saylor's office bill. So this will basically bill your project on it will create an additional directory in your project, Which will you call? That's dissed. Okay, Now, instead, off best it will be slip is the static assets along with the next order. Stammel, Andi Mandel JavaScript files that you can sell on any sort of website were. So let's see, how can you build it? So what I'll do is I'll simply go over to their terminal. Okay, on here, I'm going to simply say and am run. We'll just wait for the while. Dillard's completed. So as you can see here, it has basically created the best folder. As against now, what I would do well simply had over to the court base on as agency. Now we have this new folder dissed inside off this. You have your next artist email, okay? And you have your CSS and the Js file as well. Okay, so what you can do is you can simply take the content off this dis folder on drone your index dot html using any sort of website was Okay, so that's it for this video. And thank you so much for watching it. 60. SOURCE CODE: