异步组件与vuex结合的关键是在组件加载前将数据预存入store，通过路由守卫预取、store持久化和懒加载按需触发实现；需用router.beforeeach配合meta判断预取，返回promise确保导航时机，并统一commit至模块化mutation。
异步组件与 Vuex 结合的关键，是在组件加载完成前，把所需数据预先存入 store，避免组件渲染后发起二次请求或出现状态不一致。核心思路是：路由级预取 + store 持久化 + 组件懒加载按需触发。
在路由守卫中预取数据并提交到 Vuex
利用 Vue Router 的 beforeRouteEnter 或全局前置守卫，在跳转前拉取数据并 commit 到 store。这样组件实例创建时，数据已在 store 中就绪。
- 推荐用 router.beforeEach 配合路由元信息（如
meta: { requiresData: true }）判断是否需要预取 - 预取逻辑应返回 Promise，确保所有异步操作完成后再推进导航（调用
next()） - 数据统一 commit 到模块化的 Vuex mutation，例如
SET_USER_PROFILE，避免组件内重复请求
异步组件内部通过 mapState 直接消费预置数据
组件加载后不主动发请求，而是从 store 中响应式读取已存在的数据。配合 v-if 或 loading 状态提升体验。
