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

Posted 2023-02-23

【中文标题】Vuex 在开始时从 API 调用中填充数据

【英文标题】：Vuex populate data from API call at the start

【发布时间】：2020-10-31 02:40:09

【问题描述】：

抱歉这个简单的问题，我真的是 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: []
  

【问题讨论】：

您可以在布局文件（通常是 index.vue）文件中点击 api。只需点击 api 并成功提交结果并将结果存储在 vuex 中。

嘿，如果我在我的主 index.vue 文件上使用 api，问题是我将无法直接访问其他页面上的商店（因为它只在那里初始化）跨度>

我不明白这一点：“我无法直接访问其他页面上的商店”。你能详细说明一下吗？此外，您也可以在商店的操作部分点击 API。只需在 index.vue 文件中调用它。

所以我之前拥有的是提交给商店的组件之一中的 API（我的主页 index.vue），但如果我直接进入路由页面（因为它还没有从主页初始化）。我正在尝试找到一种在构建组件之前初始化数据数组的方法

嘿阿图尔，我在上面添加了更多关于我的上下文的解释，希望对您有所帮助

【参考方案1】：

我建议：

在default.vue 布局或任何页面中调用fetch 方法 直接在商店内使用nuxtServerInit 操作

---

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 方法的更多信息

直接在商店内使用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 方法的更多信息

希望这会有所帮助:)

【讨论】：

您好，感谢您的回答！对不起另一个问题，但我如何把它放在store.js 中？现在有上面突出显示的这 3 个导出函数。

@Xam，请参考：nuxtjs.org/guide/vuex-store/#the-nuxtserverinit-action。另外，请问您的项目模式是否通用？

嘿，我尝试了你的第二个建议，但似乎没有用...用我的观察更新了问题...