CODEWITHSUNDEEP
cachingvue.jsvuex
user762579
user762579

Reputation:

Vue.js issue with computed property uon Chrome browser reload page

I have an issue with my Toolbar component. Upon logout the user is reset to null, and the router fires the home page. One tab in the Toolbar is binded to the user value (user === null) The home page is correctly displayed... and the suer can login again if wanted.

BUT, if the user hits the reload button in the browser ( to reload the home page) then the user value is set to "false" ( ???) so the condition in the Tolbar is now false ....

Why thiss user value is reset to "false" on reload ... Is it a cache issue ? if yes, how to solve it ?

thanks for feedback

Toolbar.vue component

<template>
...
      <!--  MENU MEMBERS - UNAUTHENTICATED  -->
      <v-btn v-if="showMembers && (user === null)" flat @click="$router.push(menuItems[2].link)">
        <v-icon left>{{ menuItems[2].icon }}</v-icon>
        <span>{{ menuItems[2].title | translate }}</span>
      </v-btn>
...
</template>


<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Toolbar',
  props: ['appName', 'menuItems'],
  computed: {
    ...mapGetters(['sideNav', 'showAssociation', 'showMembers', 'showBlog', 'showShopping', 'user'])
  },
  methods: {
    ...
    onLogout () {
      this.$store.dispatch('logout')
        .then(() => {
          this.$router.push('/home')
        })
    }
  }
</script>

store/root.js // actions

 export const actions = {
 ...
 logout ({commit}) {
    firebase.auth().signOut()
      .then(() => {
        console.log('SIGNED OUT')
        commit(types.SET_USER, null)
      }, function (error) {
        console.error('Sign Out Error', error)
      })
  }
  ...
  export const mutations = {
   ... 
   [types.SET_USER] (state, payload) {
      state.user = payload
      localStorage.setItem('user', payload)
    },
   ...
     ...firebaseMutations
   }

Upvotes: 0

Views: 353

Answers (1)

user762579
user762579

Reputation:

In y store/root.js I initialized user state this way 

 export const state = {
     user: localStorage.getItem('user') || null,

If I don't use the localStorage, then the Toolbar behavior is correct . ... user is null

 export const state = {
     user: null,

Upvotes: 1

Related Questions