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

Posted 2023-02-23

【中文标题】Vue.js 在 ajax 请求期间禁用组件

【英文标题】：Vue.js disable component during ajax request

【发布时间】：2019-01-28 18:15:31

【问题描述】：

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

我有一个 Vue 组件按钮，我可以使用它发出 ajax 请求。我想在请求待处理时禁用此按钮（以防止多个请求）。

【问题讨论】：

“我不想在按钮组件内部维护请求状态” :disabled="someBooleanDataValue" 并适当地设置this.someBooleanDataValue

AJAX 请求是如何产生的？直接在组件中或通过 Vuex action?

我通过 vuex 操作发送请求

所以按钮调度了动作？

是的，按钮调度动作

【参考方案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>

---

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

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

【讨论】：

替代方式已经为我工作了。谢谢。异步请求完成后如何显示成功消息？

【参考方案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
  

组件.vue：

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

【讨论】：

状态突变应始终通过commit 完成。我什至不确定 Vuex 是否会让你在 context 上直接操作 state

它会让state 直接在context 上操作，但我同意你的观点，这不是最佳做法。

你可以跳过动作，但不能跳过突变。

你确定吗？说here 它是只读的。如果它真的有效，我怀疑它是 reactive

因为你的小提琴使用了缩小版的vuex.js，所有的错误都被抑制了。在这里，抛出错误~jsfiddle.net/r1z0a4gp/8

【参考方案3】：

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

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