如何将 asyncData 外包给 Vuex Store？答案

【问题标题】：How to outsource asyncData to Vuex Store?如何将 asyncData 外包给 Vuex Store？
【发布时间】：2019-03-30 18:30:15
【问题描述】：

我目前正在从 firebase 加载一些数据，我不想在服务器端呈现，因此可以在页面上的 asyncData 中为 SEO 编制索引。

asyncData() {
  return firebase.firestore().collection('Programms').get().then((querySnapshot) => {
    const programms = [];
    querySnapshot.forEach((doc) => {
        const programm = doc.data();
        programm.id = doc.id;
        programms.push(programm)
    })
    return { programms: programms};
  })

但是我想将其转换为我的 vuex 商店。

我知道我可以这样做：

const actions = {
    async nuxtServerInit({ commit }) {
        firebase.firestore().collection('Programms').onSnapshot((querySnapshot) => {
            const programms = [];
            querySnapshot.forEach((doc) => {
                const programm = doc.data();
                programm.id = doc.id;
                programms.push(programm)
            })
            console.log('loaded Programms', programms)

            commit('setProgramms', programms);
        })
    },
}

但是这样，我的应用程序中的每条路线都会加载数据。我不想只在一些我也显示它的页面中加载这些数据，所以我不会加载它。

我如何在 Vuex 中做到这一点？

【问题讨论】：

需要更多关于如何调用此数据的信息，因为您说您不想在每个路由器上加载它？
不确定我应该为您提供什么。在某些（目前只有 1 个）页面上，我有这个 asyncData。但是我想不在组件中处理我的数据，所以我想在 vuex 商店中外包它。但是nuxtServerInit 会为每个页面/路由加载它，对于我不需要它的页面也是如此。
我猜。首先，您需要创建路由并检查数据是否已加载，然后您可以添加包含所有相关代码的示例。
我认为您并不完全了解我的需求。我正在使用 Nuxt.js 和服务器端渲染。 AsyncData 在客户端从服务器接管之前运行。
使用 fetch 方法而不是 asyncdata 7 你在找什么 7

标签： vue.js vuex nuxt.js

【解决方案1】：

正如@aldarund 所说，fetch 方法正是您想要的。

fetch ({ store, params }) {
    return firebase.firestore().collection('Programms').get().then((querySnapshot) => {
    const programms = [];
    querySnapshot.forEach((doc) => {
        const programm = doc.data();
        programm.id = doc.id;
        programms.push(programm)
    })
    .then(() => {
      store.commit('setPrograms', programms)
    })
  }

请参阅文档here。

【讨论】：

由于某种原因，fetch 方法不起作用。我在我的帖子中发布了我的 vuex 商店。有什么想法吗？