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

    Use Vue Tools to Navigate Across the Vuex State

    Alex Jover MoralesAlex Jover Morales

    Each mutation modifies one part of the state, making it easy to debug and redo-undo modifications. This lesson shows how you can do time-travel navigation and manipulation on you Vuex store by using Vue tools.

    vueVue.js
    typescriptTypeScript
    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 You have installed the Vue dev tools. You will see a Vue tab here in your browser dev tools. In the right side, you will see a clock tap which is for your Vuex state. Here we see the state and the getters. If we inspect it, you'll see by mlk corresponding to this list here. Now, let's try to add some to-dos.

    00:23 You'll see that here in this panel, all the notations are being recorded. We can navigate through them by clicking the clock button. We can navigate back and forward through the state.

    00:44 By using this button here, we can commit all of these notations into the base state. We click it, and all of those changes has become part of the base state. Let's add some more.

    01:02 Another button interesting here is this one, for revert the notations. What it does is it will delete all notations from here. We click this one, it will delete all those three that there were before. Last, if you want to stop recording for performance or whatever, you can click this button, and then they will not be recorded anymore.

    Discuss

    Discuss