비동기 데이터를 Vuex Store로 아웃소싱하는 방법?

비동기 데이터를 Vuex Store로 아웃소싱하는 방법?

현재 소방서에서 일부 데이터를 로드하고 있는 중. 서버 측에서 렌더링되지 않아 SEO에서 인덱싱할 수 있음asyncData한 페이지에

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

여기서 문서를 참조하십시오.

참조URL: https://stackoverflow.com/questions/55434494/how-to-outsource-asyncdata-to-vuex-store