vue组件内数据变化，怎样触发/调用函数？

Question

1.问题

我打开两个标签页A、B，访问同一登录页（先前没有登录过）。当在A标签页登录完成后，希望B页面跳转到首页（避免在登录状态显示登录表单）。

前提：多个标签页间的登录状态是响应式的，在A页面登录后B页面会自动显示用户名，当在A中退出则B亦退出。即B中的数据是会响应式地改变的。这是通过vuex+localstorage+storage的监听函数做到的。

问题：想让B标签页跳转到首页，该怎样做？我有在用路由，但是不知道如何触发相应的事件来调用跳转函数，或者有其他方法推荐吗？

2.代码

<template>
          <ul class="nav navbar-nav navbar-right" v-if="loginName">            
            <li><a href="sss">{{loginName}}</a></li> <li><a href="#" @click="logout">退出</a></li>;
          </ul>
          <ul class="nav navbar-nav navbar-right" v-else>
            <li><a v-link="{ path: 'login' }">登录</a></li> <li><a href="register.html">注册</a></li>
          </ul>
</template>

<script>
import {getReferPage} from '../../vuex/getters.js'
export default {
  vuex: {
    getters: {
      referPage: getReferPage,
      loginName: state => state.loginName // 用户名。同时用来判断是否已经登录
    },
    actions: {
      logout: ({dispatch}) => {
        dispatch('SIGN_OUT')
      }
    }
  },
  methods: {
    // 这里！希望被调用的函数，当用户登录后loginName会改变，希望跳转到其他页面
    goIndex () {
      if (this.loginName) {
        if (this.referPage === window.location.href) {
          this.$route.router.go('index')
        } else {
          window.history.go(-1)
        }
      }
    }
  }
}
</script>

Answer 1

$watch 吧

Answer 2

我的做法是：
1、在A和B的父级定义一个变量保存登录数据(假设为USER), :USER.sync="USER"
2、A和B中props接收USER, props:['USER']
3、A登录后，将此用户信息赋值给接收到的USER,this.USER={...}
4、B则同步更改