Mi objetivo es tener un estado en mi tienda Vuex que se complete en la carga inicial de la aplicación con datos de una API externa de la siguiente manera:
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) }) }, } Por lo general, solo envío la acción loadAirports en App.vue cuando trabajo con Vue.js independiente. Sin embargo, como estoy creando mi aplicación en Nuxt.js, parece que no puedo descifrar cómo cargar los datos en mi estado sin enviar este método en cada página que creo, sino solo una vez en la carga de la aplicación.
¿Alguna sugerencia?
Si tiene una acción llamada nuxtServerInit en modo universal, Nuxt la llamará con el contexto de Nuxt. Puede usar esta función para cargar datos o enviar otras acciones:
const actions = { nuxtServerInit({ dispatch }, ctx) { dispatch('loadAirports'); } } Tenga en cuenta que nuxtServerInit solo se llama del lado del servidor (o durante el tiempo de compilación si se genera estáticamente). Puede implementar un nuxtClientInit similar creando un complemento de cliente que se envía inmediatamente a la tienda.
https://nuxtjs.org/docs/directory-structure/store/#the-nuxtserverinit-action
En realidad, esto es bastante simple de hacer en NuxtJs.
En primer lugar, defina su estado inicial:
export const state = () => ({ airports: [], }) Dado que Nuxt da acceso a nuxtServerInit dentro de su archivo, puede hacer esto:
//NOTA: esto solo funciona cuando el modo está configurado en universal dentro de su configuración de nuxt
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) } }entonces todo lo que te queda por hacer es crear una mutación para llenar el estado con tus datos
export const mutations = { setAirports(state, payload) { state.airports.push(...payload) }, }