Vue -рутер пу sh не определено - PullRequest
Новая
       32

Vue -рутер пу sh не определено

1 голос
/ 09 апреля 2020

Я использовал Quasar Framework для разработки своего пользовательского интерфейса. Когда я использую функцию для выхода из системы и пу sh на другой маршрут, используя vue-router, я получаю следующую ошибку: 

TypeError: Cannot read property 'push' of undefined

Я использую метод действия vuex для выхода из системы и замены: 

export const handleAuthStateChanged = ({ commit }, payload) => {
  firebaseAuth.onAuthStateChanged(function(user) {
    if (user) {
      // user is logged in
      let userId = firebaseAuth.currentUser.uid;
      firebaseDB.ref("users/" + userId).once("value", function(snapshot) {
        let userDetails = snapshot.val();
        commit("USER_DETAILS", {
          name: userDetails.name,
          email: userDetails.email,
          online: userDetails.online,
          type: userDetails.type,
          userId: userId
        });
      });
      this.$router.push('');
    } else {
      // user is logged out
      commit("USER_DETAILS", {});
      this.$router.replace('chat');
    }
  });
};

Как я могу это исправить?

Ответы [ 3 ]

1 голос
/ 09 апреля 2020

Существует две проблемы:

  • Проблема контекста this, уже охваченная ответом @ MisterCurtis

    Нормальные функции имеют собственный контекст this, а стрелка es6 функции наследуют это. Некоторые читают об этом .

  • this.$router имеет смысл, только если this является экземпляром компонента. Vue вставляет router в его прототип экземпляра. Но этот код является действием Vuex, а не методом экземпляра.

Чтобы использовать vue-router во внешнем модуле, таком как Vuex, или любом другом модуле, вы можете импортировать его: 

import router from '@/router'

И затем используйте 

router.push

вместо this.$router.push

Альтернативой может быть управление результатом аутентификации в компоненте входа и использование там this.$router.

1 голос
/ 09 апреля 2020

Любая новая функция будет определять свое собственное значение this. Внутри вашего обратного вызова this больше не указывает на исходный Vue экземпляр "this".

Попробуйте изменить:

firebaseAuth.onAuthStateChanged(function(user) { ...

на функцию стрелки:

firebaseAuth.onAuthStateChanged((user) => { ...

this будет затем правильно ссылаться на исходный экземпляр Vue, в котором определен $router.

0 голосов
/ 10 апреля 2020

Спасибо всем за попытку исправить мою проблему. я исправил это, используя функции стрелок в действиях vuex. 

export const handleAuthStateChanged = function ({ commit }, payload) {
...
...