Каков наилучший способ настроить несколько URL-адресов (ax ios) в Vuex Store? - PullRequest
Новая
       21

Каков наилучший способ настроить несколько URL-адресов (ax ios) в Vuex Store?

1 голос
/ 19 апреля 2020

У меня есть несколько страниц, которые я хочу получить, у меня это работает, но обратите внимание, что страница загружается немного медленнее, когда данных не много.

Как я могу установить свои API в хранилище vuex с помощью ax ios чтобы он работал лучше.

Магазин: 

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}}

Есть ли лучший способ хранить несколько URL-адресов API? Я использую Nuxt. js.

1 Ответ

1 голос
/ 19 апреля 2020

Вы можете значительно ускорить процесс (особенно для более чем 2 страниц), выполнив асинхронные вызовы c одновременно вместо выполнения одного только после завершения другого:

Версия 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)
...