In VueJS Version 3, What Is The Correct Way To Show And Hide The Login & Logout Links And Viceversa Which Is Placed On Nav Bar?

I am newbie to VueJS. I have developed a simple Login Screen. After successful Login, Server will send userId in JSON format. I am storing this userId in localStorage. Using this,

Solution 1:

LocalStorage is not reactive, vuejs can detect changes in properties which were created in the instance. So it will be detected only after page referesh. Following code will work

    <div id="app">
      <button @click="setLogin"> {{loggedIn !== 'null' ? 'Logout' : 'Login'}} </button>
    </div>

JS

new Vue({
    el: '#app',
  data: function() {
    return {
      get loggedIn() {
        return localStorage.getItem('userId');
      },
      set loggedIn(value) {
        localStorage.setItem('userId', value);
      }
    };
  },
  methods:{
    setLogin(){
     if(localStorage.getItem('userId') !== 'null')
      this.userId = null;
    else
     this.userId = Math.random();
   }
  }
});

You can update the value according to your requirement.