vuejs 具有一个 lodash 节流功能的多个单文件组件答案

【问题标题】：vuejs multiple single file components with one lodash throttle functionvuejs 具有一个 lodash 节流功能的多个单文件组件
【发布时间】：2020-02-12 15:09:26
【问题描述】：

我有一个如下的文件组件。

它的作用是，一旦您输入数据，它就会使用写在 vuex 操作中的 axios 调用验证后端人员。该组件重复多次。我编写了一个 lodash 节流函数来限制每个组件中的验证请求，它工作正常。

问题是 lodash 油门功能限制仅适用于组件内，一旦启动数据进入 2nd 组件 1st 组件 lodash 油门限制不适用。它触发 axios 请求。

如何跨组件编写全局 lodash 节流函数限制查询？

请注意，调用相同的 vuex 函数来验证所有组件的数据。当前的vuex动作代码如下。 lodash 油门不适用于以下代码。

 validateData({ dispatch }) {
    throttle(async function() {
      dispatch("validateDataFromServer");
    }, 25000)();
  },


  async validateDataFromServer({ commit, state }) {

   //The actual axios call goes here.

  }

【问题讨论】：

你不能把油门移到 vuex store 动作吗？
@PascalLamers：是的，试过但没用
你看我下面的回答了吗？什么不起作用？有什么错误吗？
我在答案中添加了一个工作示例，请看一下并告诉我
@PascalLamers：让我检查一下并回复你

标签： javascript vue.js vuejs2 lodash vuex

【解决方案1】：

我会尝试在给定您想要节流的 vuex 操作的情况下创建一个节流函数，然后将 vuex 存储中返回的节流函数用作操作本身。这样，节流功能应该对所有组件都是全局的。（经过测试！请参见下面的示例）

// store.js
import { throttle } from "lodash";

const actions = {
  validateDataFromServer : throttle(async function ({ commit, state}) {

    //The actual axios call goes here.

  }, 25000)
}

工作示例

由于 OP 遇到问题，我创建了一个快速的实时示例。在示例中，我有一个按钮的多个实例，它在点击时触发 vuex 操作。 vuex 操作本身通过 lodash 和 nomatter 我单击哪个按钮进行限制，该方法将被限制，就像全局一样，并且只会每 10 秒触发一次（在本例中）。

https://codesandbox.io/s/stoic-sunset-dop3y

【讨论】：

太棒了！谢谢！
很高兴我能帮上忙！