如何在Vuex Store中实现DOM加载前调用API？

方案1：入口文件预调用 Action（优先推荐） #

直接在应用挂载到DOM之前触发Vuex的异步请求，等待数据存入store后再完成挂载，完全满足DOM加载前拿到数据的需求：

// Vue3 示例（main.js）
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

// 先触发初始化数据请求
store.dispatch('fetchInitData')
  .then(() => {
    // 数据请求成功后再挂载应用
    createApp(App).use(store).mount('#app')
  })
  .catch(err => {
    console.error('初始化数据加载失败：', err)
    // 异常场景兼容，可使用默认数据继续挂载或跳转错误页
    createApp(App).use(store).mount('#app')
  })

Vue2 版本写法逻辑一致，仅实例创建语法不同：

// Vue2 示例（main.js）
import Vue from 'vue'
import App from './App.vue'
import store from './store'

store.dispatch('fetchInitData').finally(() => {
  new Vue({
    store,
    render: h => h(App)
  }).$mount('#app')
})

方案2：路由前置守卫触发（多页面/路由场景适用） #

如果是单页应用中需要针对不同路由加载前拉取对应初始化数据，可以搭配全局路由前置守卫，在组件渲染前触发Vuex请求：

// router/index.js 示例
import { createRouter, createWebHistory } from 'vue-router'
import store from '../store'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置示例，添加meta标记需要预加载数据的页面
    { path: '/dashboard', component: () => import('../views/Dashboard.vue'), meta: { needInitData: true }
  ]
})

router.beforeEach(async (to, from, next) => {
  // 仅未加载过初始化数据且当前路由需要预加载时触发请求
  if (!store.state.initDataLoaded && to.meta.needInitData) {
    await store.dispatch('fetchInitData')
    store.commit('setInitDataLoaded', true)
  }
  next()
})

export default router

补充说明 #

你提到的组件beforeCreate钩子是组件实例创建阶段触发，此时DOM还未渲染，你也可以直接在根组件App.vue的beforeCreate钩子中调用this.$store.dispatch('fetchInitData')，但这种方式请求和组件初始化是并行的，不能保证DOM挂载前数据一定返回，对数据时效性要求高的场景优先选前面两种方案。

内容的提问来源于stack exchange，提问作者Andres Mendez