![\"Timeline](\"https:\/\/www.bacancytechnology.com\/qanda\/wp-content\/uploads\/2023\/06\/Timeline-Option-1024x371.png\")
<\/p>\n<\/p>\n
As shown in the above image, Vue devtools provides Timeline options from where we can keep record of mutation and actions.<\/p>\n
For the demo purpose, I have created a functionality to increment counter using Vuex.<\/p>\n
Here is the code of Store.js:<\/strong><\/p>\n Code of App.vue<\/b> file:<\/p>\n So, when we click on the increment button, as shown in the below images we will be able to see the record of action and mutation with the timestamp.<\/p>\n So, From the timeline option, We can easily debug the flow of Vuex store in our Vue application and also track the changes of state based on execution of the mutation and actions.<\/p>\n","protected":false},"excerpt":{"rendered":" As shown in the above image, Vue devtools provides Timeline options from where we can keep record of mutation and actions. For the demo purpose, I have created a functionality to increment counter using Vuex. Here is the code of Store.js: import { createStore } from “vuex”; const store = createStore({ state() { return { […]<\/p>\n","protected":false},"author":1,"featured_media":8461,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-8174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8174"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=8174"}],"version-history":[{"count":4,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8174\/revisions"}],"predecessor-version":[{"id":8266,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8174\/revisions\/8266"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/8461"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=8174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=8174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=8174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}import { createStore } from \"vuex\";\r\n\r\n\r\nconst store = createStore({\r\n state() {\r\n return {\r\n counter: 0\r\n }\r\n },\r\n mutations: {\r\n incrementMutation(state) {\r\n state.counter++;\r\n }\r\n },\r\n actions: {\r\n incrementAction({commit}) {\r\n commit('incrementMutation');\r\n }\r\n },\r\n getters: {\r\n counter(state) {\r\n return state.counter;\r\n }\r\n }\r\n});\r\n\r\n\r\nexport default store;<\/pre>\n<template>\r\n <div>{{ counter }}<\/div>\r\n <button @click=\"increment\">Increment<\/button>\r\n<\/template>\r\n\r\n\r\n<script>\r\nexport default {\r\n name: 'App',\r\n methods: {\r\n increment() {\r\n this.$store.dispatch('incrementAction');\r\n }\r\n },\r\n computed: {\r\n counter() {\r\n return this.$store.getters['counter'];\r\n }\r\n }\r\n}\r\n<\/script>\r\n<\/pre>\n![\"Timeline](\"https:\/\/www.bacancytechnology.com\/qanda\/wp-content\/uploads\/2023\/06\/Timeline-Option-1-1024x516.png\")
<\/p>\n![\"Timeline](\"https:\/\/www.bacancytechnology.com\/qanda\/wp-content\/uploads\/2023\/06\/Timeline-Option-2-1024x423.png\")
<\/p>\n