Vue - 无法在我的 mixin 文件中使用或访问 this.$router 或 vue 实例

Question

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

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

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

我有一个类似的 mixin 文件，我在其中存储了我的社交身份验证功能，并且它也使用了“this”实例。当我调试并尝试在控制台中使用该实例时，它指出该元素未定义。但是，当我不调试时，我的身份验证代码能够正常工作。

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

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')
    }   
}

---

欢迎来到 Stack Overflow。下一次，尽量让你的代码和问题尽可能简洁。 "Walls of Text"（你有的那种杂乱无章的段落）让你的问题很难快速回答，因此它不会像其他情况下那样迅速得到回答，或者根本不会得到回答。请注意，此网站上的人们不想花时间理解您的问题，所以他们会跳过它。

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