Mon fichier src / mixins / chechauthMixin.js est le suivant:
export const checkauthMixin = {
methods: {
validateAuthentication: function(path) {
if(this.$store.getters.isAuthenticated) {
this.$router.push('/dashboard')
}
}
}
}
Cependant, il semble que le mot «ceci» ne soit pas défini ici. J'appelle cette méthode mixin à partir d'un composant ou de mon fichier routes.js. Comment puis-je accéder à l'instance vue? Si ce n'est pas possible, quelle est la bonne solution de contournement pour un tel scénario?
J'ai un fichier mixin similaire dans lequel je stocke ma fonction d'authentification sociale et qui utilise également cette instance. Lorsque je débogue et essaie d'utiliser l'instance dans la console, cela indique que l'élément n'est pas défini. Cependant, mon code d'authentification est capable de fonctionner correctement autrement lorsque je ne débogue pas.
Que se passe-t-il exactement dans les deux scénarios?
3 Réponses :
Je pense que c'est parce que vous utilisez l'ancien appel javascript
export const checkauthMixin = {
methods: {
validateAuthentication(path) {
if(this.$store.getters.isAuthenticated) {
this.$router.push('/dashboard')
}
}
}
}
Essayez d'utiliser:
validateAuthentication: function(path) {
if(this.$store.getters.isAuthenticated) {
this.$router.push('/dashboard')
}
}
J'utilise aussi des mixins et je Je n'ai aucun problème à utiliser ceci. $ router ... mais j'écris mes mixins avec la nouvelle syntaxe. J'espère que cela résout votre problème
Salut! Merci pour l'aide que j'apprécie. J'ai donc utilisé cette approche et maintenant `` ceci '' n'est plus indéfini mais il fait référence à la méthode validateAuthentication à la place.Il semble donc que l'instance vue que j'ai définie dans main.js n'est toujours pas accessible. donc ceci. $ store n'est toujours pas défini, tout comme ceci. $ router
@Hamza Veuillez modifier votre question et montrer comment vous essayez d'utiliser le mixin. Je pourrais peut-être vous aider. Importez-vous la vuex dans votre composant? Et vos geeters sont-ils ok? .. pouvez-vous réellement utiliser vos getters dans le composant qui utilise votre mixin. Je veux dire que se passe-t-il si vous collez le code de votre mixin directement dans le composant?
donc apparemment j'ai compris mon problème. En fait, je n'utilise pas correctement un mixin dans ce scénario. Les mixins sont destinés à des composants qui partagent des fonctions similaires, donc je voulais utiliser un routeguard apparemment que je viens de rencontrer. Merci beaucoup d'avoir pris le temps et d'essayer de m'aider. Grandement apprécié!!
Si ce n'est pas ce que vous attendez, essayez self:
validateAuthentication: function(path) {
var self = this;
if(self.$store.getters.isAuthenticated) {
self.$router.push('/dashboard')
}
}
Bienvenue dans Stack Overflow. La prochaine fois, essayez de rendre votre code et votre question aussi succincts que possible. "Walls of Text" (le genre de paragraphes décousus que vous avez) posez votre question difficile de répondre rapidement, il ne sera donc pas répondu aussi rapidement que cela aurait été le cas autrement, ni aucune réponse. Soyez conscients que les utilisateurs de ce site ne veulent pas passer du temps à comprendre votre question, ils la sauteront donc.
De plus, assurez-vous d'ajouter les choses que vous avez essayées et l'erreur que vous obtenez . Bonne chance!
Merci et excuses pour la longue question. D'après ce que je comprends, les mixins vue sont principalement destinés au code réutilisable, donc j'utilise cette méthode mixin comme un appel avant d'entrer dans mon fichier de routes. Il n'est pas connecté à un composant dans ce scénario. N'est-ce pas une bonne façon d'utiliser les mixins?
@Hamza Vous utilisez les mixins exactement de la bonne manière. Et je ne suis pas d'accord avec Travis .. Je pense que votre question était précise et facile à comprendre
D'accord, je pense donc avoir résolu le problème. J'utilise en fait un mixin de manière incorrecte. Le mixin est censé être utilisé pour plusieurs composants qui partagent une fonction similaire. J'essayais d'utiliser un mixin comme une fonction autonome.
En fait, je voulais utiliser un garde-route. Le vue-router a donc une fonction appelée beforeach et c'est ce que je voulais utiliser mais je ne le savais pas quand j'ai rencontré ce problème.