-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Vue.js 3 Design Patterns and Best Practices
By :

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...