Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Update State with Vuex Actions in Nuxt.js

    John LindquistJohn Lindquist

    You can conditionally add classes to Vue.js templates using v-bind:class. This will help display the status of a todo as you add a Vuex action to patch todos. This lesson walks you through setting up a toggle button that triggers a toggle action to patch todos in Vuex.

    vueVue.js
    nuxtNuxt.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Now, let's go ahead and add another button in here. This one'll be our TOGGLE_TODO, and instead of the trash can we'll use a check mark. You'll see that in action. We have our check marks in there.

    00:11 Then on our actual task name on this span we'll say v-bind:class so that if our todo is complete it'll strike it out. Strike is a class from Tachyons that represents the text-decoration line-through.

    00:27 Let's say todo complete. We'll strike it out if they're complete. None of them are complete right now, so just to make sure this is working I'll say strike it out if it's not complete. That looks like it'll work. Let's wire up this Toggle button. We want to toggle and toggle and duplicate this.

    00:46 Instead of Remove, now we have Toggle, and then instead of Axios Delete we're going to Axios Patch and we'll patch that same ID just like we deleted, but what we're patching this time is the complete to not true but the opposite of what complete currently is. That will toggle it instead of just setting it to true each time.

    01:09 Then we can go ahead and add toggle here as well so that we have a toggle mutation. I'll duplicate this, call this one Toggle, and instead of filtering this time we'll do a map that checks if this todo ID is the same as that todo ID. I'll just do this in a short inaudible statement here.

    01:28 If that's true then we want to return this todo. Otherwise return the original todo. Let's make sure this todo is coming back as the right thing, because now we want the response data, not the original one. We'll get the response.data. This is the toggle todo coming back from the patch request.

    01:47 I'll go ahead and save now and if everything's wired up I can check off eating, refresh the page. You'll see that eating is still check off. If I go to Completed, I can check off sleeping. I can delete sleeping.

    01:59 I can toggle back on eating and I can add another task, check that one off, and delete it, and it's toggling simply because we have a button, which when I click toggles it todo and that todo is being passed to Toggle, which is mapped to an action of toggle, which then patches on our API.

    02:19 We get that response back and I commit that response to a toggle mutation, defined here. A todo comes in, and our array of todos just either grabs the original one or if they match it grabs the new or updated one we got from the API response.

    Discuss

    Discuss