时间戳

首页 > 解决方案 > 如何将 asyncData 外包给 Vuex Store？

vue.js - 如何将 asyncData 外包给 Vuex Store？

问题描述

我目前正在从 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 中做到这一点？

标签： vue.jsvuexnuxt.js

解决方案

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

请参阅此处的文档。

推荐阅读