Summary

This chapter was an introduction to the state management landscape in Vue.js. Throughout this chapter, we have looked at different approaches to shared and global state management in a Vue.js application.

We began by looking at storing a global state in one shared ancestor. This allows data sharing between sibling components through props and events. While this works, it does require extra code to handle the architecture of passing around data.

You then used Vue’s built-in reactivity to create a simple, shared store. This resulted in a much simpler application, as much of the code from the previous version was able to be removed.

Finally, we have had a look at what criteria can be used to decide whether a state should live in a local component state or a more global or shared state solution.

The next chapter will be a deep dive into writing large-scale Vue.js applications with the new recommended way of handling shared state, the Pinia library.

...