.addEventListener 내의 Vue.protype에 액세스하는 방법

.addEventListener 내의 Vue.protype에 액세스하는 방법

의 글로벌 오브젝트에 접속하려고 합니다.Vue.prototype.$firebase에 선언되어 있습니다.main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import VueTailwind from "vue-tailwind";
import { FirebaseApp } from "@/firebase/firebase";
//Style
import "@/assets/styles/app.css";
import settings from "@/assets/styles/Tailwind.js";

FirebaseApp.auth().onAuthStateChanged((user)=>{
  Vue.prototype.$user = user;
})

//Vue
Vue.config.productionTip = false;
Vue.use(VueTailwind, settings);
Vue.prototype.$firebase = FirebaseApp;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

의 내부Login요소

<script>
export default {
  name: "Login",
  mounted: function () {
    this.submit();
  },
  methods: {
    submit() {
      let login = document.getElementById("login");     
      login.addEventListener(
        "submit",
        function (event) {
          event.preventDefault();
          const email = login.email.value;
          const password = login.password.value;
          this.$firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then((user) => {
              console.log(user)
              this.$router.replace('/')
            })
            .catch((error) => {
              console.log(error);
            });
        },
        true
      );
    },
  },
};
</script>

하지만 나는 이해한다TypeError: Cannot read property 'auth' of undefined, 와 같은this.$router. 단, 오브젝트를 외부로 인스턴스화하는 것은.addEvenListener인쇄가 잘 되어 있어, 액세스 할 수 있습니다.let signIn하지만, 이것은 내가 원하는 행동이 아닙니다. 대신, 나는 "자동으로" 라우팅하고 싶습니다.login및 adashboard에onAuthStateChangeVue.protype을 사용하여 로그인을 수행합니다.로컬 인스턴스화 대신 $firebase:

<script>
export default {
  name: "Login",
  mounted: function () {
    this.submit();
  },
  methods: {
    submit() {
      let login = document.getElementById("login");
      let signIn = this.$FirebaseApp;
      let onLogin = this.$router;
      login.addEventListener(
        "submit",
        function (event) {
          event.preventDefault();
          const email = login.email.value;
          const password = login.password.value;
          signIn
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then((user) => {
              console.log(user)
              onLogin.replace('/')
            })
            .catch((error) => {
              console.log(error);
            });
        },
        true
      );
    },
  },
};
</script>

에 접속하는 올바른 방법은?Vue.prototype.$firebase그리고 왜 그런 범위의 제한이 있는가?

사용을 피하다function()대신 화살표 기능을 사용합니다.

그function자체 생성this콘텍스트에 따라this더 이상 컴포넌트를 참조하지 않지만 화살표 기능은 주변을 사용합니다.this콘텍스트:

login.addEventListener(
  "submit",
  (event) => {   // Changed to arrow function
  ...            // Now you can access `this.$firebase`
  },
  true
);

언급URL : https://stackoverflow.com/questions/66282275/how-to-acces-vue-prototype-inside-an-addeventlistener