Nuxt:如何在应用程序初始化时将数据加载到存储

Question

我的目标是在我的Vuex商店中有一个状态，它在初始应用程序加载时使用来自外部API的数据填充，如下所示：

import axios from 'axios'

export const state = () => ({
    airports: [],
    pairing: {
        departure: null,
        arrival: null
    },
    loading: false
})

export const getters = {
    getAirports: (state) => {
      return state.airports
    }
}

export const mutations = {
    SET_AIRPORTS(state, payload) {
        state.airports = payload
    },
    SET_LOADING(state, payload) {
        state.loading = payload
    },
    SET_AIRPORT(state, { airport, type }) {
        state.pairing[type] = airport
    },
    CLEAR_AIRPORT(state, type) {
        state.pairing[type] = null
    }
}

export const actions = {
    loadAirports({ commit }) {
        commit('SET_LOADING', true)
        axios.get('https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat')
            .then(response => {
                // Get each row of data from the source
                const rows = response.data.split('\n');

                // Convert data from row to object
                const airports = rows.map(row => {
                    // Parse the comma-separated fields from the line by using
                    const fields = row.split(',')
                        .map(x => x.replace(/(^"|"$)/g, ''));

                    return {
                        id: fields[0],
                        name: fields[1],
                        city: fields[2],
                        country: fields[3],
                        iata: fields[4],
                        icao: fields[5],
                        longitude: fields[6],
                        latitude: fields[7],
                    };
                });

                commit('SET_AIRPORTS', airports)
                commit('SET_LOADING', false)
            })
    },
}

通常，在使用独立的Vue.js时，我只会在App.vue中分派loadAirports操作。然而，当我在Nuxt.js中构建我的应用程序时，我似乎不知道如何将数据加载到我的状态，而不是在我创建的每个页面中都调度这个方法，而只是在应用程序加载时使用一次。

有什么建议吗？

Answer 1

如果在通用模式下有一个名为nuxtServerInit的操作，Nuxt将通过Nuxt上下文调用它。您可以使用此函数加载数据或分派其他操作：

const actions = {
  nuxtServerInit({ dispatch }, ctx) {
    dispatch('loadAirports');
  }
}

请注意，nuxtServerInit是only，称为服务器端(如果是静态生成，则在编译时)。您可以通过创建一个立即发送到商店的客户端插件来实现类似的nuxtClientInit。

https://nuxtjs.org/docs/directory-structure/store/#the-nuxtserverinit-action

Answer 2

这实际上在NuxtJs中很容易做到。

首先定义你的初始状态：

export const state = () => ({
  airports: [],
})

由于Nuxt允许访问文件中的nuxtServerInit，因此您可以这样做：

//请注意，只有当nuxt配置中的模式设置为universal时，此选项才有效

export const actions = {
  async nuxtServerInit({ commit }) {
    const data =  await this.$axios.$get(`your-api`)
      
    // you can do all of your logic here before commiting
    
    commit('setAirports', data)
  }
}

那么剩下的工作就是创建一个用数据填充状态的变种

export const mutations = {
  setAirports(state, payload) {
    state.airports.push(...payload)
  },
}