Question

我的src / mixins / chechauthMixin.js文件如下：

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

但是，似乎“ this”一词在这里未定义。我正在从组件或我的route.js文件中调用此mixin方法。如何访问vue实例？如果这不可能，那么对于这种情况有什么好的解决方法？

我有一个类似的mixin文件，用于存储社会身份验证功能，并且也使用“此”实例。当我调试并尝试在控制台中使用实例时，它指出该元素未定义。但是，如果不进行调试，我的身份验证代码将可以正常工作。

两种情况下到底发生了什么？

Answer 1

我认为这是因为您使用的是旧的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')
          }   
      }
   }
}

我也使用mixins，使用this。$ router ...也没有问题，但是我用较新的语法编写了mixins。希望这能解决您的问题

Answer 2

好的，我想我已经解决了这个问题。我实际上是错误地使用了mixin。 mixin应该用于共享相似功能的多个组件。我试图将mixin用作独立功能。

我实际上想使用的是一个路由守卫。因此，vue-router具有一个称为beforeach的函数，这是我想使用的功能，但是当我遇到此问题时并不知道。

Answer 3

如果this不是您期望的值，请尝试self：

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

欢迎使用堆栈溢出。下次，请尝试使您的代码和问题尽可能简洁。 "Walls of Text"（您所浏览的杂乱无章的段落）使您的问题难以快速回答，因此它不会像其他情况一样迅速得到回答，或者根本无法回答。谨记此站点上的人员不想花时间了解您的问题，因此他们会跳过它。

此外，请务必添加您尝试过的内容以及遇到的错误。祝你好运！

Vue-无法使用或访问我的混合文件中的this。$ router或vue实例。

3 个答案: