Vuex with vue-router and Bootstrap/jQuery

This post talks about using the vue-router (official router for Vue.js 2) alongside Vuex (state management pattern + library).

Using Vuex, gives you the ability to debug code easily, and switch between states in your chrome browser. For this you will need to install the Vue.js devtools chrome extension, and open the dev-tools in a page that uses Vue.js and then navigate to the Vue tab and choose the Vuex icon (usually 2nd from left).

In the following code, the ability to add/delete widget objects is implemented using mutations in Vuex. Here mutations are synchronous calls that can alter the state. This state can be easily accessed through the mapGetters in Vuex. Following this pattern keeps the state management pretty clean in larger applications, where multiple parts of the applications get to access/alter the state.

Note: You can also make asynchronous calls using actions in Vuex but, that part has not been included in the following code.

I have used bootstrap for quick styling. The router is setup with the widgets view as default. This code was built using the default vue-cli webpack template, which makes life easier for running unit tests, end to end tests and also building production ready code.

vuejs 2.0

This is the default view of the demo application. Below you can view the debugging capabilities of Vuex.


Code (github)