时间戳

首页 > 解决方案 > 在某些页面中重复调用 API 端点以调度 Vuex 操作

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

问题描述

我使用 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 中间件不需要' t 有权访问组件生命周期组件销毁以清除间隔）

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

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

标签： javascriptvue.jsvuexnuxt.js

解决方案

为了解决这个问题，我使用了 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],

推荐阅读