Vue - не могу использовать или получить доступ к. $ Router или экземпляру vue в моем файле mixin

Question

Мой файл src / mixins / chechauthMixin.js выглядит следующим образом:

export const checkauthMixin = {
    methods: {
        validateAuthentication: function(path) {
            if(this.$store.getters.isAuthenticated) {
                this.$router.push('/dashboard')
            }   
        }
    }
}

Однако, похоже, что слово «это» здесь не определено. Я вызываю этот метод mixin из компонента или из моего файла rout.js. Как я могу получить доступ к экземпляру VUE? Если это невозможно, то что является хорошим решением для такого сценария?

У меня есть аналогичный миксин-файл, в котором я храню свою функцию социальной аутентификации, и она тоже использует экземпляр this. Когда я отлаживаю и пытаюсь использовать экземпляр в консоли, он заявляет, что элемент не определен. Тем не менее, мой код аутентификации может работать должным образом, когда я не отлаживаю.

Что именно происходит в двух сценариях?

Answer 1

Хорошо, так что я думаю, что понял проблему. Я на самом деле неправильно использую миксин Предполагается, что миксин используется для нескольких компонентов, которые имеют сходные функциональные возможности. Я пытался использовать миксин как отдельную функцию.

На самом деле я хотел использовать охрану маршрута. Таким образом, у vue-router есть функция beforeach, и я хотел ее использовать, но не знал об этом, когда столкнулся с этой проблемой.

Answer 2

Я думаю, это потому, что вы используете старый вызов JavaScript

 validateAuthentication: function(path) {
        if(this.$store.getters.isAuthenticated) {
            this.$router.push('/dashboard')
        }   
    }

Попробуйте использовать:

export const checkauthMixin = {
   methods: {
      validateAuthentication(path) {
          if(this.$store.getters.isAuthenticated) {
             this.$router.push('/dashboard')
          }   
      }
   }
}

Я также использую миксины, и у меня нет проблем с этим. $ Router ... но я пишу свои миксины с более новым синтаксисом. Надеюсь, что это решит вашу проблему

Answer 3

Если this не соответствует вашим ожиданиям, попробуйте self:

validateAuthentication: function(path) {
    var self = this;
    if(self.$store.getters.isAuthenticated) {
        self.$router.push('/dashboard')
    }   
}

---

Добро пожаловать в переполнение стека.В следующий раз постарайтесь сделать свой код и вопрос максимально лаконичным. "Стены текста" (разбросанные абзацы Сорта) затрудняют быстрый ответ на ваш вопрос, поэтому он не будет отвечать так же быстро, как в противном случае, или отвечал вообще.Имейте в виду, что люди на этом сайте не хотят тратить время на понимание вашего вопроса, поэтому они пропустят его.

Кроме того, обязательно добавьте то, что вы пробовали, и какую ошибку вы получаете.Удачи!