CODEWITHSUNDEEP
vue.jsvuexnuxt.js
Jonas
Jonas

Reputation: 7885

How to outsource asyncData to Vuex Store?

I'm currently loading some data from firebase I wan't to be server side rendered so it can be indexed for SEO in asyncData on a page.

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};
  })

However I would like to convert this to my vuex store.

I know I could do this:

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);
        })
    },
}

But this way the data will be loaded for every route in my app. I wan't to load this data only in some pages where I also display it, so I don't load it unnecessary.

How could I do this in Vuex?

Upvotes: 3

Views: 2919

Answers (1)

Andrew1325
Andrew1325

Reputation: 3579

As @aldarund says, the fetch method is precisely what you want.

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)
    })
  }

See the docs here.

Upvotes: 2

Related Questions