Implementing a basic reactive state
As mentioned before, a drawback of using a message bus to share data is the multiplicity of copies of the same data, including the overhead for the handling of the events. Instead, we can leverage Vue’s reactivity engine and, in particular, the reactive() helper constructor to create a single entity to hold our application state. Just like before, we can wrap this reactive object in a Singleton pattern to share it among components and plain JavaScript functions, objects, and classes. It's worth mentioning that this is one of the great advantages of Vue 3 and the new Composition API.
From the example code, we will end with a basic example like this:
Figure 7.4 – A shared reactive object for state management
As you can see in the previous screenshot, the state in this case is shared (or accessed) by all the components of this example. Any of the child components can modify any of its values, and the...
