Javascript Axios在提交表单后发送过多的请求

我开始使用Laravel和Nuxt Js开发一个小项目，因此我创建了一个用于在数据库中添加用户的小程序。一切进展顺利，我有一个小问题，我的axios脚本像循环一样发送多个请求：

这是完整的代码：

<script>

import $ from 'jquery'
import Swal from 'sweetalert2'
import toastr from 'toastr'
import Vue from 'vue'
Vue.component('pagination', require('laravel-vue-pagination'))

export default {
  layout: 'app',
  data () {
    return {
      laravelData: {},
      formFields: {},
      search: null,
      refresh: false
    }
  },
  watch: {
    refresh () {
      this.store()
      this.refresh = false
    }
  },
  mounted () {
    $('a.just-kidding').hide()
    this.index(1)
  },
  methods: {
    index (page = 1) {
      this.$axios.$get('/customer?page=' + page).then((response) => {
        this.laravelData = response
        this.refresh = true
      })
    },
    store () {
      const formData = $('#add-customer').serialize()
      return this.$axios.$post('/customer/store', formData).then((response) => {
        this.refresh = true
      })
    },
    find () {
      if (this.search === '') {
        this.index()
      } else {
        this.$axios.$get('/customer/find?customer=' + this.search).then((response) => {
          this.laravelData = response
        })
      }
    },
    destroy (customerId) {
      Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.value) {
          // this.$Progress.start();
          this.$axios.$get('/customer/destroy?customer=' + customerId).then((response) => {
            if (response.success) {
              toastr.success(response.error, 'Ahoy Hoy !!', { 'positionClass': 'toast-top-left' })
              this.refresh = true
            } else {
              toastr.error(response.error, 'Owh :( !!', { 'positionClass': 'toast-top-left' })
            }
          })
          // this.$Progress.finish();
        }
      })
    }
  }
}
</script>

我在laravel中创建了一个名为cors的中间件页面

    <?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    }
}

这将导致一个无限循环，因为您正在监视的观察者函数中更改
This.refresh
，这将重新触发观察者函数，这将改变它，这将触发观察者，这将改变它，这将触发观察者，这将改变它，这将触发观察者，这将改变它，这将触发观察者，这将改变它

您明白了。
您提供的代码没有提供足够的上下文，说明问题可能来自何处。。。也许如果你能添加更多的代码样本……我看不出这里有什么本质上的错误。要求都一样吗？如何调用store（）？多个请求是什么？它实际上是多个POST请求，还是一个选项后跟一个POST？如果是后者，那是正常的。这是因为CORS和飞行前的请求。@MattU可以，你仔细检查我的问题，只是编辑它是一个无限循环吗？如果是这样，可能是因为您正在该属性的watcher中设置this.refresh

。观察者函数可以有两个参数

newValue

和

oldValue

。在处理watcher方法中的操作之前，检查值是否不同通常是一个好主意。好的，提交表单后我如何更新我的表？还有其他方法或建议吗

    <?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    }
}

  watch: {
    refresh () {
      this.store()
      this.refresh = false
    }
  },