앱을 렌더링할 때 firestore에서 컬렉션을 가져와 vuex 상태로 설정하는 방법은 무엇입니까?

앱을 렌더링할 때 firestore에서 컬렉션을 가져와 vuex 상태로 설정하는 방법은 무엇입니까?

나는 카테고리라는 소방서 컬렉션을 가지고 있다.이 컬렉션의 문서는 vue 어플리케이션의 모든 페이지(루트)에서 사용되기 때문에 이 데이터에 액세스하는 가장 효율적인 방법은 각 컴포넌트가 매번 Firestore에서 가져오는 것이 아니라 필요할 때 카테고리 상태에 액세스할 수 있도록 스토어에 카테고리 상태를 유지하는 것이라고 생각했습니다.응용 프로그램이 렌더링될 때 카테고리 컬렉션의 내용을 vuex 상태로 설정하려면 어떻게 해야 합니까?

여기가 제 가게입니다.js:

import Vue from 'vue'
import Vuex from 'vuex'
const fb = require('./components/firebase/FirebaseConfig.js')

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        categories: []
    },
    actions: {
        fetchCategories({commit, state}) {
            fb.categoriesCollection.get().then((querySnapshot) => {
                if (querySnapshot.empty) {
                    //this.$router.push('/HelloWorld')

                } else {
                    this.loading = false
                    var categories = []
                    querySnapshot.forEach((doc) => {
                        categories.push(doc.data());
                    })

                    this.categories = categories
                }
         })
    },  
    mutations: {
        setCategories(state, val) {
            state.categories = val
        }
    }
})

다음을 사용하여 fetch Categories를 호출할 수 있습니다.

this.$store.dispatch('fetchCategories')

근데 이걸 어디에 둬야 할지 모르겠어요.

저장소 내에서 작업을 수행하여 데이터를 가져올 수 있습니다. 작업 내에서 변경 사항을 커밋하여 상태를 업데이트합니다.

스토어가 생성되면 호출을 통해 즉시 가져오기 작업을 디스패치할 수 있습니다.store.dispatch:

store.displaces를 설정합니다.

import Vue from "vue";
import Vuex from "vuex";
const fb = require("./components/firebase/FirebaseConfig.js");

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    categories: []
  },
  actions: {
    fetchCategories({ commit }) {
      fb.categoriesCollection.get().then(querySnapshot => {
        if (querySnapshot.empty) {
          //this.$router.push('/HelloWorld')
        } else {
          this.loading = false;
          var categories = [];
          querySnapshot.forEach(doc => {
            categories.push(doc.data());
          });

          commit("setCategories", categories);
        }
      });
    }
  },
  mutations: {
    setCategories(state, val) {
      state.categories = val;
    }
  }
});

store.dispatch("fetchCategories");

export default store;

스토어는 선언과 별도로 내보내야 합니다.

언급URL : https://stackoverflow.com/questions/50942596/how-to-get-collection-from-firestore-and-set-to-vuex-state-when-the-app-is-rende