Rewritten title: How to change the state of global variables in components in Vue 3?

Question

I'm fairly new to Vue3 and web development in general. My practice setup is using Vue3 and Express.

I'm thinking of using a global property like app.config.globalProperties.$isAuthenticated and switching between true and false based on the axios call to the server. Everything works fine except that I can't change its state in any component via this.isAuthenticated = true or false.

Things I've tried, this.$isAuthnticated, is first removing it using ref or reactive in app.js. None of them suit me. Finally I want a global variable to react to the server response.

Can anyone point me in the right direction? Thanks in advance.

Answer 1

I also encountered this problem and tried to find a solution to the problem.

I found thisarticle about state management. Using it, you can create state in application components while using variables from any component.