Create a Vuex Store using TypeScript

Access State by using Vuex getter functions with TypeScript

Modify State by using Vuex Mutations with TypeScript

Use Vue Tools to Navigate Across the Vuex State

Perform Async Updates using Vuex Actions with TypeScript

Handle Forms Connected to a Vuex Store using TypeScript

Split Vuex Store into Modules using TypeScript

Lazy Load a Vuex Module at Runtime using TypeScript

Access the Root State from a Vuex Module using TypeScript

Use Namespaces in Vuex Stores using TypeScript

Call a Root Vuex Mutation or Action from within a Module in TypeScript

Write a Vuex Plugin using TypeScript

Add options to a Vuex plugin using TypeScript

Vue.js State Management with Vuex and TypeScript

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](https://github.com/vuejs/vue-devtools).

https://app.egghead.io/api/v1/lessons/vue-js-use-vue-tools-to-navigate-across-the-vuex-state/subtitles

[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.

Use Vue Tools to Navigate Across the Vuex State

Share this video with your friends

Course

Vue.js State Management with Vuex and TypeScript