在 Vuex Store 中设置多个 url (axios) 的最佳方法是什么？

Question

我有几个要检索的页面，我可以正常工作，但请注意页面加载速度有点慢，而数据不多。

如何使用 axios 在 vuex store 中设置我的 API，使其性能更好。

商店：

export default {
    state: { 
    homepage: [],
    aboutUs: []
},


actions: {
  async loadPosts({ commit }) {
    // Define urls pages
    const urlHomepage = 'https://api.domain.com/homepage';
    const urlaboutUs = 'https://api.domain.com/aboutUs';

    // Responses pages
    const responseHomepage = await this.$axios.get(urlHomepage);
    const responseaboutUs = await this.$axios.get(urlaboutUs);

    // variables pages
    this.homepage = responseHomepage.data
    this.aboutUs = responseaboutUs.data

    // mutations pages
    commit('SET_HOMEPAGE', this.homepage)
    commit('SET_aboutUs', this.aboutUs)
  }
},

mutations: {
  SET_HOMEPAGE (state, homepage) {
    state.homepage = homepage;
  },
  SET_aboutUs (state, aboutUs) {
    state.aboutUs = aboutUs;
  }
}
};

我在我的页面中使用它：

import {mapState} from 'vuex';

export default {
  name: 'Home',
  mounted() {
    this.$store.dispatch('loadPosts')
  },
  computed: {
    ...mapState([
      'homepage'
    ])
  }
}

通过添加：

{{homepage}}

有没有更好的方法来存储多个 API url？我正在使用 Nuxt.js。

Answer 1

您可以通过同时运行异步调用而不是仅在另一个完成后才运行一个调用来显着加快速度（尤其是超过 2 页）：

_{版本 1}

// Execute async immediately and store the promises
const pH = this.$axios.get(urlHomepage); 
const pA = this.$axios.get(urlaboutUs);

// Await them all at once instead of individually
const [rH, rA] = await Promise.all([pH, pA]);

或者另一种写法：

_{第 2 版}

const [rH, rA] = await Promise.all([
  this.$axios.get(urlHomepage),
  this.$axios.get(urlaboutUs)
]);

^{结果数组顺序与调用顺序一致}

然后存储结果：

// variables pages
this.homepage = rH.data
this.aboutUs = rA.data

// mutations pages
commit('SET_HOMEPAGE', this.homepage)
commit('SET_aboutUs', this.aboutUs)