In the last chapter, you learned how Vue Router can be used to add virtual pages to a Vue.js single-page app. We will now add components to Vuebnb that share data across pages and therefore can't rely on transient local state. To do this, we will utilize Vuex, a Flux-inspired library for Vue.js that offers a robust means of managing global application state.
Topics covered in this chapter:
- An introduction to the Flux application architecture and why it is useful for building user interfaces
- An overview of Vuex and its key features, including state and mutations
- How to install Vuex and set up a global store that can be accessed by Vue.js components
- How Vuex allows for superior debugging with Vue Devtools via mutation logging and time-travel debugging
- The creation of a save feature for Vuebnb listings and a saved listings page
- Moving page state into Vuex to minimize unnecessary data retrieval from the server