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

问题描述

问 题

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>

解决方案

$watch 吧

这篇关于vue.js - vue组件内数据变化，怎样触发/调用函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！