привязать глобальную переменную к компоненту с помощью: key - PullRequest
Новая
       2

привязать глобальную переменную к компоненту с помощью: key

0 голосов
/ 13 июля 2020

Я работаю над проектом 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 в моих login() методах:

Вход. vue

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

Проблема в том, что при успешном входе пользователя в систему и перенаправлении на главную страницу компонент заголовка не обновляется, нужно ли мне использовать prop вместо глобальной переменной в моем App.vue?

1 Ответ

2 голосов
/ 13 июля 2020

Vue обновляет его, когда обнаруживает, что данные, от которых он зависит, изменяются. Чтобы Vue обнаружил, что он изменяется, данные должны быть реактивными.

Что-то в цепочке прототипов не работает, и я думаю, вы слишком усложняете ситуацию, используя для этого цепочку прототипов. Чтобы управлять глобальным состоянием, просто используйте магазин Vuex. ( docs )

Затем вы должны использовать ...mapGetters(['isLoggedIn']) в своем свойстве computed, this.$store.commit('loggedIn', true) или что-то в этом роде в своем файле Login. vue.

...