使用 :key 在组件上绑定全局变量

Question

我在一个 Vue 项目上工作，我有一个登录页面，当用户登录时会重定向到主页。

问题是当用户在主页上时，我需要更新/重新渲染标题组件。

所以我在 main.ts 中创建了一个全局变量：

Main.ts

Vue.prototype.isLogin = false;

我使用这个全局值作为我的标题的键：

App.vue

<template>
  <div id="app" class="container">
    <e-header v-bind:key="isLogin" />
    <div class="alert-box">
      <div class="alert-list">
        <e-alert
          v-for="(notif, index) in $store.state.notifications"
          :key="index"
          :type="notif.type"
          @dismissAlert="dismissAlert(index)"
        >
          {{ notif.message }}
        </e-alert>
      </div>
    </div>
    <router-view />
  </div>
</template>

在登录组件上，在我的login() 方法中：

登录.vue

        AdminApi.login(this.email, this.password).then(() => {
          this.loaderActive = false;
          this.isLogin = true;
        });

问题是当用户登录成功并重定向到主页时，标题组件没有更新，我需要在App.vue中使用prop而不是全局变量吗？

Answer 1

当 Vue 检测到它依赖的数据发生变化时，它会更新它。为了让 Vue 检测到它的变化，数据需要是响应式的。

原型链上的东西不是，我认为你使用原型链来过度复杂化。要管理全局状态，只需使用 Vuex 存储。 (docs)

然后，您可以在 computed 属性中使用 ...mapGetters(['isLoggedIn'])，this.$store.commit('loggedIn', true) 或 Login.vue 文件中的类似内容。