Vue: header is not refreshed right away. But localStorage is changed

Question

When I login using a form this happens:

1. loggedIn value in localStorage is changed to "true"
2. Router pushes to /home
3. Header doesn't change and still shows Login/Signup buttons

I need it to be

1. loggedIn value in localStorage is changed to "true"
2. Router pushes to /home
3. Header changes and a picture

Header.vue:

      <div class="flex flex-wrap items-center justify-end ">
        <HeaderItem v-if="!isLoggedIn"
            class="pl-10" text = "Login" link="/login"/>
        <HeaderItem v-if="!isLoggedIn" class="pl-10"
                    text = "Signup" link="/signup"/>

        <div v-if="isLoggedIn">
          <UserHeader/>
        </div>
      </div>

export default {
  name: 'App',
  components: {HeaderItem, UserHeader},
  data() {
    return {
      homeLink: "/home"
    }
  },
  created: {
    isLoggedIn() {
      console.log(JSON.parse(localStorage.getItem("loggedIn")) === "true");

      if (localStorage.getItem("loggedIn") === "true")  {
        console.log("STORAGE LOGGED IN TRUE");
      }
      else  {
        console.log("STORAGE LOGGED IN FALSE");
      }

      return localStorage.getItem("loggedIn") === "true";
    }
  }
}

It only prints the correct message and changes header after I press Ctrl+Shift+R. But the localStorage has the correct loggedIn value right away. How do I fix it?

EDIT:

I also tried this:

  <div class="flex flex-wrap items-center justify-end ">
        <HeaderItem v-if="!loggedIn"
            class="pl-10" text = "Login" link="/login"/>
        <HeaderItem v-if="!loggedIn" class="pl-10"
                    text = "Signup" link="/signup"/>

        <div v-if="loggedIn">
          <UserHeader/>
        </div>
      </div>

export default {
  name: 'App',
  components: {HeaderItem, UserHeader},
  data() {
    return {
      homeLink: "/home",
     // loggedIn: false
    }
  },
  computed: {
    loggedIn() {
      return localStorage.getItem("loggedIn") === "true";
    },
...

It has the same results: the header only changes after the page refresh (Ctrl+Shift+R).

EDIT:

I can't set localStorage.loggedIn inside Header! It is set in LoginForm.vue, completely different component

Answer 1

Local storage isn't reactive so VueJS can't detect changes to it. As a result, your computed property is unable to track changes to it

The reason it works on a reload is that computed methods will always run at least once to generate the initial value.

You need to tie the updating of local storage with a reactive variable like a boolean.

Each time you access your local storage object, check the storage value and set a boolean in VueJS - something like isLoggedIn and use that instead of your computed method.

You can either use Vuex and commits, or simply set the state of the header component.

For example, when your component is created you can set isLoggedIn to true or false depending on if the local storage key is present.

Similarly, you can also set isLoggedIn to true when a user logs in (In the same method you set your local storage key) and to false when a user logs out.

Consider the following example:

Header.vue

  <div class="flex flex-wrap items-center justify-end ">
    <HeaderItem v-if="!isLoggedIn"
        class="pl-10" text = "Login" link="/login"/>
    <HeaderItem v-if="!isLoggedIn" class="pl-10"
                text = "Signup" link="/signup"/>

    <div v-if="isLoggedIn">
      <UserHeader/>
    </div>
  </div>

export default {
  name: 'App',
  components: {HeaderItem, UserHeader},
  data() {
    return {
      homeLink: "/home",
      isLoggedIn: false,
    }
  },
  computed: {
      isLoggedIn() {
          return this.$store.state.isLoggedIn;
      }
  },
}

And then in any other component

  created() {
      if (localStorage.getItem("loggedIn") === "true")  {
          this.$store.commit('SET_LOGGED_IN', true);
      }
  },
  methods: {
       login() {
           localStorage.setItem('loggedIn', 'true');
           this.$store.commit('SET_LOGGED_IN', true); 
       }
  }

For the above example, you have a Vuex store with a boolean state called isLoggedIn. You then commit a mutation called SET_LOGGED_IN that sets the state of isLoggedIn to true or false.

Using a computed property in any component, you can easily access the value of isLoggedIn and reactively respond to changes in it.

Every time you update or read from the local storage, you must also update a variable in VueJS. That variable is what is reactive.

Answer 2

If you want your functions to be reactive on the same component, then create a variable and set its value where you set the localStorage loggedIn value.

This is just an example code:

<template>
  <div class="flex flex-wrap items-center justify-end ">
    <h3>{{ isLoggedIn }}</h3>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        loggedIn: false
      }
    },
    created () {
      // added 3 seconds gap to make the value true and check reactivity
      setTimeout(() => this.onSignIn(), 3000)
    },
    computed: {
      
      isLoggedIn() {
        if (localStorage.getItem('loggedIn')) return localStorage.getItem("loggedIn") === "true";
        return this.loggedIn
      }
    },
    methods: {
      onSignIn () {
        this.loggedIn = true
        localStorage.setItem('loggedIn', true)
      }
    }
  }
</script>

Update 2:

After understanding your situation from a previous question similar to this that you asked. Here is the code, that will help you in your case wherein LoginForm.vue you are setting localStorage value and you want to use that value in your App.vue and pass it to Header.vue. For such case, I used the Bus Event in order to communicate between the component which might be far on the parent to access, such as App.vue.

event-bus.js

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

LoginForm.vue

<template>
  <div class="home-page">
    <button type="submit" @click="onSignIn()">Login</button>
  </div>
</template>

<script>
import EventBus from '../event-bus';
  export default {
    methods: {
      onSignIn () {
        localStorage.setItem('loggedIn', true)
        EventBus.$emit('OnLogin', true)
      }
    }
  }
</script>

App.vue

<template>
  <div id="app">
    <Header :isLoggedIn="isLoggedIn"/>
    <router-view/>
  </div>
</template>
<script>
import Header from './components/Header'
import EventBus from './event-bus';
export default {
  components: {
    Header
  },
  data() {
    return {
      loggedIn: false
    }
  },
  computed: {
    isLoggedIn() {
      if (localStorage.getItem('loggedIn')) return localStorage.getItem("loggedIn") === "true";
      return this.loggedIn
    }
  },
  created () {
    EventBus.$on('OnLogin', (isLogin) => {
      this.loggedIn = isLogin
    })
  }
}
</script>

Header.vue

<template>
  <div class="flex flex-wrap items-center justify-end ">
    <HeaderItem v-if="!isLoggedIn"
        class="pl-10" text = "Login" link="/login"/>
    <HeaderItem v-if="!isLoggedIn" class="pl-10"
                text = "Signup" link="/signup"/>

    <div v-if="isLoggedIn">
      <UserHeader/>
    </div>
  </div>
</template>

<script>
import HeaderItem from './HeaderItem'
import UserHeader from './UserHeader'
  export default {
    components: {HeaderItem, UserHeader},
    props: ['isLoggedIn']
  }
</script>