Vue.js：阻止后续请求，直到完成前一个请求

Question

我的应用程序中有用户可以喜欢或不喜欢的帖子：有两个不同的按钮，每个按钮都显示帖子获得多少个喜欢/不喜欢。目前，我正在努力解决此功能的错误。如果我快速依次单击这些按钮，然后又停止，则这些按钮将继续显示此单击行为，并且在控制台中会出现一小段时间的更多请求。

这是我的组件中的内容：

<template>
...
<div>
      <a style="cursor: default"
         @click.pointer="dislikePost(getPost.id)">
        <i class="icon-minus"/>{{ getPost.dislikes }} Dislike
      </a>
      <a style="cursor: default"
         @click="likePost(getPost.id)">
        <i class="icon-plus" />{{ getPost.likes }} Like
      </a>
    </div>
...
</template>

这是我商店里的东西：

...
actions: {
likePost({ commit }, postId) {
  http
    .post(`${config.api}/posts/${postId}/like`)
    .then(({ data }) => {
      commit('load_post', data);
    });
},
dislikePost({ commit }, postId) {
  http
    .post(`${config.api}/posts/${postId}/dislike`)
    .then(({ data }) => {
      commit('load_post', data);
    });
},
},
mutations: {
load_posts(state, posts) {
  state.posts = posts;
},
},
...