Quasar Framework: Vue.js Cross Platform App (7/10): Vuex - Actions & Mutations

hi there my name's Danny this is a seventh module of ten that I'll be sharing here on YouTube for my full course on quasar framework version one welcome to this course module so we've created our view X store we've added our tasks data to it in the state object and we've retrieved this data using Gatiss and displayed the tasks on the page but we need to actually be able to change the data that's in the state in the store so in this module we're going to learn how to do that with actions and mutations let's jump back to the app and we'll open up the inspector and we'll go to the view dev tools and the view X tab the conve State you can see our state object here if I open up the tasks and open up the first task which is this one you can see completed is set to false now if I click on this first task although it's marked as completed on the page if we look in this state object here it's still set to false and also we have this error in the console which says do not mutate view X store state outside mutation handlers now if I open up tasks top view in the components folder components tasks tasks top view he has to click handler for this task is trying to set tasks completed to the opposite of task completed now if we open up the store file store - tasks in the store folder so it's trying to change this property here but with view X we're only allowed to change the state within a mutation which is a method that will go in here now it's generally best practice to create an action which then calls a mutation so let's create an action for updating a task so down then the actions object will create a function called update task and we'll stick a console log in there this just says update task action save that okay jump back to task top view how can we actually call this action from within this component well what we can do is we can map actions to our component a bit like we did with map getters so down in the script section you want to add import map actions from view X save that now we map actions within the methods property so I'll create a methods property down here and we wanna add dot dot dot that actions and then within that you want to specify the store module that we want to grab the actions from which is tasks and then within this array we specify all the actions that we want to be available within this component so our action was called update tasks so we'll stick put date tasks in there save that and now this action is mapped to our component so we can just call it from wherever we like so if I jump back up to this cue item element here and this click humbler I can just replace this click handler with book date tasks let's just save that I'll refresh the page now if I click on one of the tasks you can see in the console here update task action so this action is now being fired from our component but we need to actually send some information to this action otherwise we can't really do anything so what we can do is we can send an object to this action with some data in it so if we if we look at our data what we're trying to do here is change a field within a task so what information are we going to need to be able to do this well we're going to need the ID of the task and then we're going to need the properties that were going to change within that task so back to tasks top view what we could do is we could send an object with first of all the ID which we have available in this component thanks to this prop this ID prop so we can do ID set that to ID and then we can create another property called let's say updates which contains the updates that we want to send so we could just send completed set that to the opposite of task completed say but now back to store tasks Jas we need to pass in this object which we generally call a payload so within this update task action actions first of all expect an object and I'll explain that later there laughter that you can pass in the data that you're sending from the component so we'll call this payload now if I log this out you let's see if that's working okay now if I click on a task great it says update action and then we see the payload that we've sent with the ID ID 1 and the updates in this case completed true just completed is false to begin with then we want to set it to true now we can't change the state of this store from within an action we need to call a mutation from that and we need to use the commit function to do that so in this update task action we need to in this object here pass in the commit method and then we can just simply add commit then the name of the mutation we want to trigger which we'll also call update task and then we want to pass in the payload so that the payload is also available within the mutation I'll just delete these two logs now we can create a mutation called update tasks and we need to pass in these state to this and then the payload which we're sending from this action so within this mutation I'll just log out that payload to make sure it's working payload from mutation say that now let's click on a task can can see it in the console here payload from mutation with all the same data that we initially pass to this action so how can we update the task in the state from this mutation well we could use object assign now object assign allows us to essentially copy the properties from one object to another object and we have the properties that we want to copy in this payload in this updates property so we could just use object to sign to copy these updates to the tasks in the state so we want to do object dot assign and the first parameter is the object that we're assigning to the object that we copy and stuff to so this is going to be state dot tasks and then the ID of the task and we have that within this payload object remember here so it's a payload ID so we can just do state tasks payload dot ID and then the second parameter is the dates that we want to apply to that which is in payload start to put dates okay let's get rid of that console.log and save that see if it's working if we open up the view dev tools and let's look at the state currently completed on this first task is set to false so let's click on this task okay you can now see up here it's told us that it's fired this update task mutation now if we click on that and then go down to state we can now see this first task completed is now set to true so this is working now so we're now manipulating the state using this mutation so I'll just quickly run through what's happening again here so I jumped at a stop do so first of all the user clicks the item which fires the update task action which is mapped down here using map actions update tasks there so this action is fired we've passed the pay loading and then we simply fire this up takes us mutation and again pass the same payload across to that and then we use object dot assigned to assign the updates in that payload to the task that we want to change we can now mark tusks is completed that's not the ability to delete tusks so first of all we're going to need a button on each one of these tasks so let's open up task view you can see these cue item elements they're made up of these cue item section components so I'm just going to okay this last one this last cue item section component I'm going to delete everything inside there and we're going to stick a button in here so let's jump to the quasar site and go to view components and then buttons let's have a look what we can find so I'd like a button like this so round and flat button with an icon so I'm going to click on View source and grab the code for that button copy that paste it into this item section I'm going to break these attributes onto multiple lines save that okay we can now see the icon on the page it's taking up a little bit of space there so if we jump to the bottom page down to cue button API and then style we have this dense prop that we can add which makes it take up less space so let's add that to our button dents okay that's a little bit better now we need an appropriate icon for this button so let's jump to the material icons page material diode / tool slash icons and we'll search for delete ok this bid icon looks pretty good that has the class name delete so let's change this icon prop here on the button to delete save that ok now it looks like delete button but I'd like it to be red so this color prop here let's change that to red which is one of the classes you can see on the call a pallet page in style and identity so yeah read okay that's looking a bit better now when the user clicks this I want to first show a confirmed dialogue to the user so let's first of all just add a click handler to this button and we'll call a method called prompt to delete and we'll pass in the ID of this particular task because we're going to need that when we actually delete the task and down hearing methods we have this map actions method here we can just stick methods as usual underneath this so underneath that will create a prompt to delete method passing that ID okay so now we need a dialogue to show to the user so let's jump back to the quasar site we're going to use the dialogue plug-in for this this is a quasar plug-in so we want to go to quasar plugins and then dialogue scroll down and we can see what they look like here there's an alert and there's a confirm this is what we want first of all we need to install this so it tells us here we need to add dialogue to the plugins array within the config file so let's open up quasi Kampf is look for plugins here we go I'm allowed dialogue to that save that now let's grab the code for this confirm dialogue here so I'll click on view source and then script and here's the code for that so let's just grab that copy and paste it and we'll change it as needed okay so I'm gonna remove all these callbacks here on okay I'm canceled on dismiss and just leave this first on okay callback because this pop-up is only going to do one thing so when the user clicks the okay button within this confirm dialog then this on ok callback will be fired so within that for now I'm just going to put delete it so that and I'll change the message here to really delete save that okay so let's see if this dialog is working when we click the button yeah that seems to be working if I click okay then we see that deleted log in the console now we have a little problem here when I click on this delete button it's mark this task is completed why is that well that's because we have this click handler on the task which is marking the task is completed and this is a parent element of this button so when we click this button is bubbling up to this queue - item element so this click handler is being triggered and we don't want that how can we stop that well if we jump back down to our button here and this click handler we can add a modifier to this which is dot stop and that will stop this event from propagating got to the parent elements above it save that refresh the page okay now when I click the button the task is no longer marked as completed right so we need an action and a mutation in order to actually delete a task from the state so let's jump back to store tasks and actions and we'll create a new action called delete task we will pass in the commit method and in this case the payload is just going to be an ID so I'm not going to call it payload I'm just going to call it ID and then within the action we can commit an equivalent mutation so we'll commit a mutation called also delete tasks we'll pass in that ID and I'll create that mutation here delete tasks pass in the state and the ID that we've sent from that action and then I'll just log out that ID save that if I click on this tallit button then click OK ok we're not seeing this log let's jump back to tasks top view and then down to the prompt to delete method ok I'm not actually triggering this action yet this delete task action so we need to map that action to this component now we already have this map actions method here we could just add delete tasks to this array here like this and now the delete task action is available within this component so back down in this on ok callback we can just fire this dot delete task and then pass in the ID which are already passing into this prompt to delete method save that reload the page and now if I click delete and then ok we can now see in the console delete ID ID 1 which means that this delete task action is being successfully fired which is then firing the delete task mutation successfully and we're passing in the ID successfully so now in this mutation we need to actually delete this task from the state up here so how can we do that well one thing we could try is just delete then State tasks and then the ID let's see if that works save that click delete click ok ok that's not working but if we look in the view dev tools here it has fired this mutation if we click on that and go to state and then tasks you can see it's actually removed this task from the tasks object but our view here is not updated and that's because in view j/s whenever we want to delete from the state add a brand-new object to the stake in order to keep it reactive we need to use built-in view methods for performing these deletes and updates so what we can do is we can import view the top of this store tasks yes so import view from view and then instead of delete state dot tasks ID we can just do view dot delete and then pass in the object we want to delete from which is state dot tasks and then pass in the key we want to delete which is ID so I'll just delete these two lines here save that let's see if that works though click delete click ok great the task is now deleted thanks for watching make sure you subscribe and leave a comment to let me know what you think and if you're interested in the full course click the link in the description in the next video we're going to add the ability to add a task so we're going to add an add task button when the user clicks that we're going to show a modal within that model we're going to have a farm we're going to add validation to this far when they user submits to farm and it's valid we're going to add the task to the view X State

Channel: Make Apps with Danny

Views: 11,331

Keywords: quasar framework, quasar, course, tutorial, guide, udemy, vue.js, vue, vuejs, quasar components, components, store, actions, mutations, state, vuex, vuex tutorial, quasar framework v1, vuex actions, vuex actions vs mutations, vue framework, vue js

Id: uH0nmqki3gQ

Length: 21min 30sec (1290 seconds)

Published: Mon Jun 03 2019