Question

我正在寻找以下问题的简单解决方案：

我有一个Vue组件按钮，通过它可以进行Ajax请求。我想在请求待处理时禁用此按钮（以防止出现多个请求）。

Answer 1

听起来像您希望您的操作在开始时设置（提交）标志，然后在结束时清除它。

在Vuex中尝试类似的事情...

state: {
  loading: false
},
mutations: {
  isLoading (state) {
    state.loading = true
  },
  doneLoading (state) {
    state.loading = false
  }
},
actions: {
  doAjaxRequest ({ commit }) {
    commit('isLoading')
    return doSomeAjaxRequest().then(res => {
      // success
    }).catch(err => {
      // oh noes
    }).finally(() => {
      commit('doneLoading')
    })
  }
}

现在在组件中，您可以映射loading状态并使用它来禁用按钮，例如

<template>
  <button :disabled="loading" @click="doAjaxRequest">Do AJAX!</button>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  export default {
    computed: mapState(['loading']),
    methods: mapActions(['doAjaxRequest'])
  }
</script>

或者，如果您的操作返回了一个Promise（如上所述），则可以在组件内维护请求的进度。例如，假设您的按钮有

<button :disabled="loading" @click="doTheThing">Do the thing!</button>

和

data () {
  return { loading: false }
},
methods: {
  doTheThing() {
    this.loading = true
    this.$store.dispatch('someAjaxActionThatReturnsAPromise').finally(() => {
      this.loading = false
    })
  }
}

Answer 2

State.js：

state: {
  pendingRequest: false
},
actions: {
  fetchRequest: async function(context) {
    context.state.pendingRequest = true
    let req = await fetch(url)
    let data = await req.json()
    context.state.pendingRequest = false
  }
}

Component.vue：

<button :disabled='$store.state.pendingRequest' @click="$store.dispatch('fetchRequest')">Button</button>

Answer 3

我找到了另一个解决方案：它会自动为注册的端点生成一个vuex模块，通过axios拦截器监视这些端点，并根据相关请求的状态设置适当的“待处理”状态值。

https://github.com/pharkasbence/pending-request-tracker

Vue.js在Ajax请求期间禁用组件

3 个答案: