Vuex 在开始时从 API 调用中填充数据

Question

抱歉这个简单的问题，我真的是 Vue/Nuxt/Vuex 的新手。

我目前有一个 vuex 商店，我希望能够在开始时使用 API 调用填充list（这样我就可以直接从商店访问我的应用程序的所有页面在组件中实例化它）。

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 中）以及如何将其与导出链接。非常感谢，如果这是一个简单的问题，我们很抱歉。

（编辑）上下文： 所以我为什么要寻找这个解决方案是因为我曾经将数据（来自 API 调用）提交到我的一个 Vue 组件内的存储 - 来自我的主页的index.vue。这意味着我的数据是在这个组件上初始化的，如果我直接走另一条路线，我的数据将在那里不可用。

这意味着：http://localhost:3000/ 会有数据，如果我路由到 http://localhost:3000/test 它也会有数据，但是如果我直接去 http:// localhost:3000/test 从一个新窗口它不会有数据。

EDIT2：

用nuxtServerInit尝试了这个建议

更新了 store.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. 在default.vue 布局或任何页面中调用fetch 方法
2. 直接在商店内使用nuxtServerInit 操作

---

1. fetch方法

您可以在default.vue 布局中使用fetch 方法，每次使用该布局的每个页面都会调用该方法。或者，如果您想为各个页面加载特定数据，请在单独的页面上定义 fetch 方法。

<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>

您可以在 nuxtjs 文档 here 中阅读有关 fetch 方法的更多信息

1. 直接在商店内使用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);
    }
  }
}

您可以在 nuxtjs 文档 here 中阅读有关 fetch 方法的更多信息

希望这会有所帮助:)