计算属性不更新不同选项卡中的 UI

Posted 2023-02-22

【中文标题】计算属性不更新不同选项卡中的 UI

【英文标题】：Computed property not updaing UI in different tabs

【发布时间】：2017-08-24 04:15:18

【问题描述】：

我使用

vuex

进行状态管理并对用户进行身份验证

火力基地

我使用 vuex-persisted state 将状态保存在 cookie 中

在我的 vuex 商店中，我管理我的 userdata（用户名，登录状态）如下

我的 store.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 时，它显示已登录以及用户名

这是我的 header.vue 组件

<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>

【问题讨论】：

嗨，我遇到了同样的情况，只是想确认一下，一旦从任何一个选项卡更新，vuex-persistedstate 和 vuex 是否应该跨多个选项卡更新状态？这对于记录状态检查非常重要。例如，如果用户继续结帐，并在另一个选项卡中注销，则用户在切换回结帐选项卡时应该会看到一个弹出窗口显示“您已注销”。

我已经有一段时间没有研究那个项目了。但据我记得，这个解决方案奏效了。

【参考方案1】：

你可以watch你的Vuex状态：

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
    
  );
,

【讨论】：

但是使用计算有什么问题...它也会在属性取决于更改权时返回值,,,

这没什么问题，但是在这种情况下，您还必须在组件创建时调用一个函数（创建或挂载钩子），并在此函数中检查登录状态并初始化正确的状态值，所以吸气剂返回适当的东西

我没有使用过 vuex-persistedstate，但我想你应该调用类似 this.$store.createPersistedState() 来加载保存的数据。不确定。

我使用 vuex 持久化状态在 cookie 中加载用户登录状态