Vuex заполняет данные из вызова API в начале

Question

извинений за простой вопрос, я действительно новичок в Vue / Nuxt / Vuex.

В настоящее время у меня есть магазин vuex, я sh, чтобы иметь возможность заполнить list с помощью вызов API в начале (чтобы я мог получить к нему доступ на всех страницах моего приложения прямо из магазина, а не создавать его в компоненте).

store. js

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

export const mutations = {
    set(state, testArray) {
        state.list = testArray
    }
}

export const getters = {
    getArray: state => {
        return state.list
    },
}

По сути, я хочу предварительно заполнить state.list, чтобы мои компоненты могли вызывать данные непосредственно из хранилища vuex. Это будет выглядеть примерно так:

db.collection("test").doc("test").get().then(doc=> {
    let data = doc.data();
    let array = data.array; // get array from API call
    setListAsArray(); // put the array result into the list
});

Я ищу, где разместить этот код (я предполагаю, что внутри store. js) и как go связать это с экспорт. Заранее большое спасибо и извините, если это простой вопрос.

(Edit) Контекст: Итак, почему я ищу это решение, потому что я использовал для фиксации данных (из вызова API) в хранилище внутри один из моих Vue компонентов - index.vue с моей главной страницы. Это означает, что мои данные были инициализированы в этом компоненте, и если я go прямо на другой маршрут, мои данные там не будут доступны.

Это означает: http://localhost: 3000 / будут данные, если я перенаправлюсь на http://localhost: 3000 / test, у него также будут данные, НО если я перейду прямо к http://localhost: 3000 / test из нового окна, у него НЕ будет данных.

EDIT2 :

Пробовал предложение с nuxtServerInit

Обновленное хранилище. js

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

export const mutations = {
    set(state, dealArray) {
        state.list = dealArray
    }
}

export const getters = {
    allDeals: state => {
        return state.list
    },
}

export const actions = {
    async nuxtServerInit({ commit }, { req }) {
        // fetch your backend     
        const db = require("~/plugins/firebase.js").db;
        let doc = await db.collection("test").doc("test").get();
        let data = doc.data();
        console.log("deals_array: ", data.deals_array); // nothing logged
        commit('set', data.deals_array);       // doesn't work
        commit('deals/set', data.deals_array); // doesn't work
    }
}

Пробовал действовать с nuxtServerInit, но при регистрации хранилища в другом компоненте это пустой массив. Я попытался зарегистрировать хранилище в другом компоненте (пытаясь получить к нему доступ), получил следующее:

store.state:  {                                                                                                                                     
  deals: {
    list: []
  }
}

Answer 1

Я бы предложил:

1. вызвать метод fetch в макете default.vue или на любой странице
2. использовать действие nuxtServerInit непосредственно внутри магазина

1. fetch метод

Вы можете использовать метод fetch в макете default.vue, где он вызывается каждый раз для каждой страницы, использующей макет. Или определите метод выборки на отдельных страницах, если вы хотите загрузить определенные c данные для отдельных страниц.

<script>
export default {
  data () {
    return {}
  },
  async fetch ({store}) {
    // fetch your backend 
    var list = await $axios.get("http://localhost:8000/list");

    store.commit("set", list);
  },
}
</script>

Вы можете узнать больше о методе fetch в nuxt js docs здесь

используйте действие nuxtServerInit непосредственно внутри магазина

Добавьте в свой store.js новое действие:

import axios from 'axios';

actions: {
  nuxtServerInit ({ commit }, { req }) {
     // fetch your backend     
     var list = await axios.get("http://localhost:8000/list");

      commit('set', list);
    }
  }
}

Подробнее о fetch метод в nuxt js docs здесь

Надеюсь, это поможет :)