理论：Axios 调用（专门针对 VueJS）答案

【问题标题】：Theory: Axios Calls (Specifically for VueJS)理论：Axios 调用（专门针对 VueJS）
【发布时间】：2020-06-12 04:02:19
【问题描述】：

在组件mount() 上，Axios 从后端获取信息。在生产站点上，用户在路线之间来回走动，当数据已经在state 中时，一次又一次地进行相同的调用将是低效的。

专业人士如何设计他们的 VueJS 应用程序，以免进行不必要的 Axios 调用？

谢谢你，

【问题讨论】：

标签： vue.js

【解决方案1】：

如果数据是您的应用程序的核心并存储在 Vuex 中（假设这就是您所说的 "state"），为什么不直接在您初始化存储的地方加载它呢？

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'wherever'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    centralData: {}
  },
  mutations: {
    setCentralData (state, centralData) {
      state.centralData = centralData
    }
  },
  actions: {
    async loadCentralData ({ commit }) {
      const { data } = await axios.get('/backend')
      commit('setCentralData', data)
    }
  }
}

// initialise
export const init = store.dispatch('loadCentralData')

export default store

如果您需要在（例如）挂载您的根 Vue 实例之前等待调度完成，您可以使用 init 承诺

import Vue from 'vue'
import router from 'path/to/router'
import store, { init } from 'path/to/store'

init.then(() => {
  new Vue({
    store,
    router,
    // etc
  }).$mount('#app')
})

您可以在任何地方导入和使用init 承诺，以等待数据加载。

【讨论】：