Experimenting with reactivity and Proxies patterns

It is time to put into practice what we have learned in this chapter under the light of patterns we saw in Chapter 2, Software Design Principles and Patterns, with a small experimental project. We want to create an option to make sessionStorage data behave like a reactive central state manager so that we can use it in our components. Possible uses for this approach could be to persist user-entered data during refreshes, alert components of data changes, and so on.

Since SessionStorage does not provide an API we can listen to, our approach will be to create a Proxy handler using the Decorator pattern, to match and keep synchronized the values in the store with an internal and private reactive property. We will wrap this in a singleton and use the Central State manager approach to share it in our application. Let’s start by creating our core service:

/services/sessionStorage.js

import { reactive } from 'vue&apos...