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

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

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

谢谢你，

如果数据是您的应用程序的核心并存储在 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 promise

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承诺任何地方以等待数据加载。