如何将asyncData外包给Vuex Store?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将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中这样做?
答案
正如@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。
以上是关于如何将asyncData外包给Vuex Store?的主要内容,如果未能解决你的问题,请参考以下文章
如何将 Firebase Firestore 数据添加到 s-s-r Nuxt Apps Vuex Store