vue如何限制每条数据只能十分钟操作一次

后端要求，指定接口只能十分钟调用一次，而表格显示十条数据，每条数据都能调用这个接口，并且每条数据之前不会互相影响。

而所有数据是从接口获取的，所以前端不能直接在数据里新增一个状态显示是否已经点击。因为一旦刷新页面或者重新获取数据，该状态就会刷新。

页面展示

html代码

        <el-table-column
          label="操作"
          fixed="right"
          width="160"
          class="tableOpt"
          align="center"
        >
          <template slot-scope="scope">
            <!-- v-hasPermi="['error:code:edit']" -->
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" :disabled="isDisabled(scope.row.id)" @click="handleClick(scope.row.id)">重新同步状态</el-button>
          </template>
        </el-table-column>

js代码

lastClickTime: JSON.parse(localStorage.getItem('lastClickTime')) || {}, // 从本地存储获取 // 存储每个条目的最后点击时间
timers: {} // 用于存储定时器ID

  beforeDestroy() {
    // 清除所有定时器
    Object.values(this.timers).forEach(timerId => clearTimeout(timerId));
  },
  methods: {
    handleClick(id) {
      const currentTime = new Date().getTime();
      this.$set(this.lastClickTime, id, currentTime);
      localStorage.setItem('lastClickTime', JSON.stringify(this.lastClickTime));
      this.msgSuccess('成功点击');
      
      // 设置定时器，10分钟后自动解除禁用
      const timerId = setTimeout(() => {
        this.$delete(this.lastClickTime, id); // 清除点击时间
        localStorage.setItem('lastClickTime', JSON.stringify(this.lastClickTime)); // 更新本地存储
      }, 600000); // 600000 毫秒 = 10 分钟
      
      // 存储定时器ID
      this.$set(this.timers, id, timerId);
    },
    
    isDisabled(id) {
      const currentTime = new Date().getTime();
      const timeElapsed = currentTime - (this.lastClickTime[id] || 0);
      
      // 判断时间是否超过十分钟（600,000 毫秒）
      return timeElapsed < 600000;
    },
  }

点击后会禁用按钮，十分钟后自动放开

localStorage缓存