계산된 속성이 서로 다른 탭에서 UI를 업데이트하지 않음

계산된 속성이 서로 다른 탭에서 UI를 업데이트하지 않음

• 상태 관리를 위해 vuex를 사용하고 Firebase로 사용자 인증
• vuex 지속 상태를 사용하여 쿠키에 상태를 저장합니다.

vuex 스토어에서 아래와 같이 사용자 데이터(사용자 이름, 로그인 상태)를 관리합니다.

내 가게.js.

/all imports here
export const store = new Vuex.Store({
   state : {
    user: {
        loggedIn: false,
        userName: 'Guest'
    }
},

getters : {
    g_user: state => {
        return state.user;
    }
},

mutations : {
    m_logInUser: (state, userName) => {
        state.user.loggedIn = true;
        state.user.userName = userName;

    },
    m_loggedOut: (state) => {
        state.user.loggedIn = false;
        state.user.userName = 'Guest';
    }
},

actions : {
    a_logInUser: ({state, commit}, userInput) => {
        //call to the API and on success commit m_logInUser mutation
    },
    a_loggedOut: ({commit}) => {
        //call to the API and on success commit m_loggedOut mutation
    }
},
plugins: [
     createPersistedState({
         paths: ['authStore.user'],
         getState: (key) => Cookie.getJSON(key), 
         setState: (key, state) => Cookie.set(key, state, { expires: 3, secure: false })
     })
]
});

지금 내가 직면하고 있는 문제

• 두 개의 다른 탭에서 앱을 열고 첫 번째 탭에서 사용자를 로그인하면 사용자는 로그인 버튼을 숨기고 로그아웃 버튼을 표시하고 사용자 이름을 표시합니다.

• 그러나 두 번째 탭에는 여전히 로그인 버튼이 표시되지만, 사용자에 대한 console.log가 표시되면 로그인된 것과 사용자 이름도 표시됩니다.

여기 제 머리글이 있습니다.값 성분

<template>
  <nav class="navbar navbar-default">
<div class="container-fluid">
  <div class="navbar-header">
    <router-link to="/" tag="a" class="navbar-brand">Brand</router-link>
 </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li @click="testmethod"><a>cuser</a></li>
        <router-link to="/statuses" active-class="active" tag="li"><a>Status</a></router-link>
        <router-link to="/users" active-class="active" tag="li"><a>Users</a></router-link>
    </ul>
    <ul class="nav navbar-nav navbar-right" v-if="!g_user.loggedIn">
      <router-link to="/signup" active-class="active" tag="li"><a>Signup</a></router-link>
      <router-link :to="{name: 'login'}" active-class="active" tag="li"><a>Login</a></router-link>
    </ul>
    <ul class="nav navbar-nav navbar-right" v-else>
        <router-link to="/post" tag="li"><a><button class="btn btn-info">POST</button></a></router-link>
        <router-link to="/current" active-class="active" tag="li"><a>{{ g_user.userName }}</a></router-link>
        <li @click="logOut"><a>Log out</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</template>

<script>
import { mapGetters } from 'vuex'
export default{
    methods: {
        logOut(){
            this.$store.dispatch('a_loggedOut');
        },
        testmethod(){
            var user = this.$firebase.auth().currentUser;

        console.log(user);
        console.log(user.email);
        }

    },
    computed: {
        ...mapGetters([
            'g_user'
        ])
    }
}
</script>

넌 할 수 있다.watchVuex 상태:

mounted() {
  this.$store.watch(
    function(state) {
      return state.g_user.loggedIn;
    },
    function(value) {
      if (value === true) {
        console.log('user is logged in');
        // do your logic here, setup loggedin behavior hooks. For example call login() function which should first check if the user is already logged in
      }
    },
    {
      immediate: true
    }
  );
},

언급URL : https://stackoverflow.com/questions/43114453/computed-property-not-updaing-ui-in-different-tabs