This content originally appeared on Telerik Blogs and was authored by Marina Mosti
Sometimes when writing applications you need a piece of data, usually a variable, to be available through your whole codebase—maybe even through multiple instances of Vue. So is there a “best practice” when dealing with these situations? Let’s take a look.
The Ideal Scenario
In an ideal world (usually what we cover when writing blog posts such as this), you are dealing with a single contained SPA that is being build by Vue CLI through webpack or perhaps Vite. These scenarios are ideal because the solutions for managing a global state (hint, hint).
Whenever you need your data to be accessible to all of your components, you may want to first think about bringing in a global state handler. In Vue 3 the official recommended solution is Pinia or Vuex.
Vuex was the go-to solution for any global state in Vue 2, and has since been updated to work with Vue 3 and the new composition API. However, a new tool has since come to contend with it for the spot of our global state manager—Pinia. I currently recommend that all new projects, and even old ones (when you can afford the time to migrate them) use Pinia. After using it even for a bit, you will feel how intuitive and modular it is—and more importantly, how much less bulky and redundant it is than its previous counterpart.
A global state provided by these libraries allows you to inject it into any component in your application, making it an ideal place to store any and all global variables.
The Advanced Scenario, Dependency Free
There are times where you may not be allowed or have chosen not to include a dependency in your project—for example when writing a dependency-free library. In these cases, and also when dealing with dynamically generated component trees, such as those of a dynamically generated form or a schema driven component tree, you may need a different solution.
Vue 3 grants us two very important tools—provide and inject. They allow us to grab a piece of data or variable from our top-level component, whatever it may be, and inject it into its children. This tool is very powerful because it doesn’t matter how many levels of nested children your component may have, or how deep the rabbit hole of the component goes—your data will always be ready to be fetched (and even maintain reactivity) by utilizing its sibling method provide.
When Dealing With Secret Data
When dealing with secret data, such as private tokens, it is very important to be able to not expose them to your repository. In these cases, global “variables" are not a good solution. Instead, you should utilize the power of env variables through Vue CLI or env variables in Vite.
This way we can ensure that these private keys are kept hidden from prying eyes, and are only used directly when the application is being built.
When All Else Fails
Like I mentioned in the beginning, not all scenarios are ideal when working in real-world projects. Sometimes you will be getting some data directly from your backend injected into the HTML via the server. Sometimes you will have to share this “global data” with a jQuery widget or some other current framework like React.
Keep calm and remember that, in the end, Vue is a JavaScript framework, that runs in a browser and therefore you can use the browser’s window Global object. This data is probably best captured in some way by your application as soon as possible, perhaps in main.js or top-level App.vue and managed internally from this point forward. It can get very messy very quickly when a lot of components are reading and writing into the window object from random positions in your application, and the bugs can be really difficult to track down and squash.
With this solution, a good architecture, clean code and good component composition are a must. The flexibility provided by the window object comes with a lot of responsibility.
This content originally appeared on Telerik Blogs and was authored by Marina Mosti
Marina Mosti | Sciencx (2022-04-27T08:00:00+00:00) What To Do When You Need a Global Variable in Vue 3. Retrieved from https://www.scien.cx/2022/04/27/what-to-do-when-you-need-a-global-variable-in-vue-3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.