Vue-router 推送未定義

Question

我使用 Quasar 框架來設計我的 UI。 當我使用 function 注銷並使用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');
    }
  });
};

我怎樣才能解決這個問題？

Answer 1

任何新的 function 都會定義自己的this值。 在你的回調中this不再指向原始的 Vue 實例“this”。

嘗試改變：

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

到箭頭 function：

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

然后this將正確地引用定義$router的原始 Vue 實例。

Answer 2

有兩個問題：

• @MisterCurtis 的回答已經涵蓋了this上下文問題

  普通函數有自己的this上下文，而 es6 箭頭函數繼承它。 一些關於那個的閱讀。

• this.$router僅在this是組件實例時才有意義。 Vue 將你的router插入到它的實例原型中。 但是這段代碼是一個 Vuex 動作，而不是一個實例方法。

要在外部模塊（如 Vuex 或任何其他模塊）中使用vue-router ，您可以導入它：

import router from '@/router'

然后使用

router.push

而不是this.$router.push

另一種方法是在登錄組件中管理身份驗證結果並在那里使用this.$router 。

Answer 3

感謝大家嘗試解決我的問題。 我在 vuex 操作中不使用箭頭函數來修復它。

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