Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Use Vue Tools to Navigate Across the Vuex State


    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    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.

    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.

    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.

    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.