Vue.js 如何将asyncData外包给Vuex存储？

我目前正在从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中执行此操作

正如@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)
    })
  }

---

请参阅文档。

需要更多关于如何调用此数据的信息，因为您说过不想在每个路由器上加载此数据？不确定我应该向您提供什么。在一些（目前只有1个）页面上，我有这个

asyncData

。但是，我希望不在组件中处理数据，因此我希望将其外包到vuex存储中。然而，

nuxtServerInit

会为每个页面/路由加载它，所以对于我不需要它的页面也是如此。首先，您需要创建路由并检查数据是否已加载，然后您可以添加带有所有相关代码的示例。我正在使用Nuxt.js和服务器端渲染。AsyncData在客户端从服务器接管之前运行。请使用fetch方法而不是AsyncData 7这是您正在寻找的7 fetch方法由于某种原因无法工作。我在帖子中发布了我的vuex商店。有什么想法吗？