Vue.js: Up and Running

Chapter 6. State Management with Vuex

Until this point in the book, all data has been stored in our components. We hit an API, and we store the returned data on the data object. We bind a form to an object, and we store that object on the data object. All communication between components has been done using events (to go from child to parent) and props (to go from parent to child). This is good for simple cases, but in more complicated applications, it won’t suffice.

Let’s take a social network app—specifically, messages. You want an icon in the top navigation to display the number of messages you have, and then you want a messages pop-up at the bottom of the page that will also tell you the number of messages you have. Both components are nowhere near each other on the page, so linking them using events and props would be a nightmare: components that are completely unrelated to notifications will have to be aware of the events to pass them through. The alternative is, instead of linking them together to share data, you could make separate API requests from each component. That would be even worse! Each component would update at different times, meaning they could be displaying different things, and the page would be making more API requests than it needed to.

vuex is a library that helps developers manage their application’s state in Vue applications. It provides one centralized store that you can use throughout your app to store and work with global state, and gives you the ...