在某些页面中重复调用 API 端点以调度 Vuex 操作答案

【问题标题】：Call API endpoint repeatedly in some pages for dispatch an Vuex action在某些页面中重复调用 API 端点以调度 Vuex 操作
【发布时间】：2020-09-15 08:11:24
【问题描述】：

我使用 NuxtJs 框架。我创建了一个动作来调用端点并将它的响应设置为存储。
我想在我的一些仪表板页面中每 30 秒调用一次端点。如果用户导航到不需要 API 调用的页面，我想禁用 API 调用。

在我的第一次尝试中，我习惯于在所有需要 API 调用数据的页面中实现 Interval（这是可行的，但我不想在我的许多需要 API 调用数据的组件中复制这些代码）：

data: () => {
  return {
   getting: null,
  };
},
computed: {
  ...mapActions({
    myAction: "***name-of-action***",
  }),
},
created() {
  this.getData();
},
beforeDestroy() {
  clearInterval(this.getting);
},
methods: {
  getData() {
    this.getting = setInterval(() => {
      this.myAction()
    }, 30000);
  },
},

在我的第一次尝试中，我使用 NuxtJs 中间件和 JavaScript 间隔来调度操作，但是当我导航到不需要 API 调用的页面时，它仍然调用 API（因为 JavaScript 间隔需要明确但 Nuxt中间件无权访问组件生命周期组件销毁以清除间隔）

export default (props) => {
   setInterval(() => {
     props.store.dispatch("***name-of-action***");
   }, 3000);
};

我想针对这个问题做最佳实践。

【问题讨论】：

best practice 将编写一些代码来尝试解决您的问题，然后显示该代码并询问您做错了什么 - 这就是堆栈溢出应该如何工作 - 我会做的一种方式这是为了不清除间隔，但是，检查一些“条件”以查看是否需要 API 调用 - 不确定这是否是“最佳实践” - 但它比“无代码”更好
@JaromandaX 我添加了我的代码
你有两个间隔，其中一个是不可阻挡的......这是一个完全不同的问题
@JaromandaX 不，我不是同时尝试了这两种解决方案。
哦......对......好吧，你尝试过的很有趣

标签： javascript vue.js vuex nuxt.js

【解决方案1】：

我相信不太坏的事情是做一个 mixin，它暴露了 3 件事：

startPolling() : 开始轮询特定组件的方法
stopPolling() : 在组件中停止轮询的方法
pollingprop() //name it as you see fit 计算属性始终公开更新的数据，每次在 mixin 中进行调用时都会计算此数据
(optional) hooks beforeRouteEnter() + beforeRouteLeave() docs 它会自动调用this.startPolling() 和this.stopPolling()

【讨论】：

此代码将轮询添加到我的所有组件，但我只需要将其添加到某些特定组件
事实上你做了一个 polling-mixin.js ，在你需要这个登录的每个组件中你都会添加它

【解决方案2】：

为了解决这个问题，我使用了 mixin，它成为了一个很好的解决方案。

我这样创建一个 mixin：

// intervalMixin.js
export default {
  data: () => {
    return {
     getting: null,
    };
  },
  computed: {
    ...mapActions({
      myAction: "***name-of-action***",
    }),
  },
  created() {
    this.getData();
  },
  beforeDestroy() {
    clearInterval(this.getting);
  },
  methods: {
    getData() {
      this.getting = setInterval(() => {
        this.myAction()
      }, 30000);
    },
  },
}

所以我将这个 mixin 添加到我想要的每个组件中：

mixins: [intervalMixin],

【讨论】：