Nuxt应用初始化时如何将外部API数据加载到Vuex store中

以下是三种常用的可行方案，可根据你的项目场景选择：

方案1：使用 nuxtServerInit 钩子（SSR/SSG场景推荐） #

nuxtServerInit是Nuxt官方提供的服务端初始化钩子，只会在应用初始化阶段执行一次，自动把数据填充到Vuex全局状态中。
你只需要在现有的store/index.js的actions字段下新增这个钩子即可：

// store/index.js 原有代码保留，仅在actions里新增以下方法
export const actions = {
  // 你原来的loadAirports方法保留
  loadAirports() {
    // 原有逻辑不变
  },
  // 新增nuxtServerInit钩子
  async nuxtServerInit({ dispatch }) {
    await dispatch('loadAirports')
  }
}

该方案适合服务端渲染、静态站点生成场景，会在页面渲染前就完成数据加载，页面不需要额外处理逻辑。

方案2：使用全局插件（SPA/全场景通用） #

如果你的项目是SPA模式，或者想要在客户端执行这个请求，可以用Nuxt的插件机制，插件只会在应用启动时加载执行一次：

1. 在项目plugins目录下新建init-airports.js文件，内容如下：

// plugins/init-airports.js
export default async ({ store }) => {
  // 已经有数据就不重复请求
  if (store.state.airports.length === 0) {
    await store.dispatch('loadAirports')
  }
}

2. 在nuxt.config.js中注册这个插件：

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/init-airports.js'
  ]
}

如果你只想让这个逻辑在客户端执行，可以把文件重命名为init-airports.client.js，不需要额外配置就会自动仅在浏览器端运行。

方案3：使用全局布局钩子 #

如果你的项目所有页面都复用同一个默认布局，可以直接在全局布局的生命周期里执行派发：

<!-- layouts/default.vue -->
<script>
export default {
  async created() {
    if (this.$store.state.airports.length === 0) {
      await this.$store.dispatch('loadAirports')
    }
  }
}
</script>

该方案实现最简单，适合所有页面共用默认布局的场景。

内容的提问来源于stack exchange，提问作者Alexandru Ana