Question

我已经搜索了2个小时，我不知道我在做什么错..希望有人可以帮助我：

基本上，这很容易。我有一个用于Recaptchas的可重用组件。有问题的元素是弹出对话框中“忘记密码”（通过登录掩码）上的文本字段

处理不同的验证码（因为同一页面上有两个）的基本思想是：

我有一个针对每个可能的验证码的vuex字段，已初始化为null
对于每个表单提交按钮，我都会触发一个突变，将验证码字段设置为0
然后，我在recaptcha组件中有设置观察程序来监听更改，if === 0开始评估验证码
然后onValidated，调用一个将结果保存到vuex的突变。然后另一个if(newVal)的观察者将整个事件提交。

按照我的理论，这毫无问题。我记得它已经在过去的某个时候起作用了（或者我只是没有注意到重复提交），但是现在我做了一些更改，并且它的行为真的很奇怪。

准确地说：我单击一次按钮，一切正常，但一个观察者触发两次，即使根本不应该触发。一次触发前的所有操作，只有观察者触发两次，即使我触发了

if (!this.running) {
            this.running = true
            console.log('forgot watcher 2')
            this.$refs.recaptcha.execute()
        }

但它也不起作用。似乎是在完全相同的时间运行它们，这对我来说没有意义

控制台输出为：

submit
verify forgot captcha
0
forgot watcher 2
0
forgot watcher 2
verified
forgot captcha verified 03AOLTBLTP...............
forgot watcher
verified
forgot watcher

因此很容易遵循：

单击login.vue
变异将值设置为0
recaptcha.vue中的观察者注意到并开始评估（此人错误地触发了两次）
如果已验证，则verifyCaptcha()在recaptcha.vue中存储到vuex

我的文件如下：

login.vue

<template>
  <v-form
    @submit.prevent="twoFaRequired ? sendTwoFa() : verifyLoginCaptcha()"
  >
    // ...
   <recaptcha />
    // ...
    <v-layout>
        <form>
           // ...
           <recaptcha />
           <v-btn
              color="primary"
              :loading="forgotLoading"
              :disabled="successful || forgotLoading || $v.$invalid"
              @click.native.stop.prevent="verifyForgotCaptcha"
            >Reset Password</v-btn>

//...
  methods: {
    verifyForgotCaptcha() {
      console.log('submit')
      this.$store.commit('user/VERIFY_FORGOT_CAPTCHA')
    },
//...
  watch: {
    forgotCaptcha(newVal, oldVal) {
      if (newVal) {
        console.log('forgot watcher')
        this.sendForgotEmail()
      }
    },
//...
    forgotCaptcha() {
      return this.$store.state.user.forgotCaptcha
    },

mutations.js

//...
  VERIFY_FORGOT_CAPTCHA(state) {
    console.log('verify forgot captcha')
    state.forgotCaptcha = 0
  },
  FORGOT_CAPTCHA_VERIFIED(state, payload) {
    console.log('forgot captcha verified', payload)
    state.forgotCaptcha = payload
  },
//...

recaptcha.vue

<template>
  <div class="d-flex justify-center">
    <vue-recaptcha
      ref="recaptcha"
      :sitekey=siteKey
      :loadRecaptchaScript="true"
      size="invisible"
      @verify="verifyCaptcha">
    </vue-recaptcha>
  </div>
</template>

<script>
  import VueRecaptcha from 'vue-recaptcha'
  import { mapGetters } from 'vuex'

  export default {
    data: () => ({
      running: false,
      usage: '',
      siteKey: 'xxxxxxx'
    }),
    components: { VueRecaptcha },
    computed: {
      ...mapGetters([
        'user'
      ]),
    //...
      isForgotCaptcha() {
        return this.$store.getters['user/forgotCaptcha']
      }
    },
    methods: {
      verifyCaptcha(response) {
        console.log('verified')
    //...
          if (this.usage === 'forgot')        this.$store.commit('user/FORGOT_CAPTCHA_VERIFIED', response)
        this.usage = ''
        this.$refs.recaptcha.reset()
      }
    },
    watch: {
    //...
      isForgotCaptcha(newVal) {
        if (newVal === 0) {
          console.log('forgot watcher 2')
          this.usage = 'forgot'
          this.$refs.recaptcha.execute()
        }
      },
    }
  };
</script>

如果您需要更多信息/代码，请随时询问。我希望任何人都可以告诉我我在做什么错。我要在这里生气。谢谢！

Answer 1

在>>> print(line1, line2, line3, sep="\n") a b c中，您有两个login.vue的实例。它们中的每一个都有其自己的观察者集，但不会共享。同样，它们每个都有自己的计算属性<recaptcha>。

isForgotCaptcha发生更改时，它将更改两个组件的user/forgotCaptcha属性，从而触发它们的每个监视程序。

设置isForgotCaptcha只会为this.running组件之一设置该属性，而不会对其他组件产生任何影响。

Vuex观察者错误地触发了两次

login.vue

mutations.js

recaptcha.vue

1 个答案: