如何在应用程序呈现时从firestore获取集合并设置为vuex状态？

Posted 2021-04-15

我有一个名为categories的firestore集合。这个集合中的文档被我的vue应用程序中的每个页面（路由）使用，所以我认为访问这些数据的最有效方法是在store.js中有一个类别状态，这样每个组件都可以访问类别状态当它需要而不是每次从firestore获取它。在呈现应用程序时，如何将类别集合的内容设置为我的vuex状态？

这是我的store.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
        }
    }
})

我知道我可以使用以下方法调用fetchCategories：

this.$store.dispatch('fetchCategories')

但我不确定在哪里放这个。

答案

以下应该做的伎俩：

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

Vue.use(Vuex)

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());
        })
        store.commit('setCategories', categories)
    }
});

export const store = new Vuex.Store({
    state: {
        categories: []
    },
    actions: {
        //.....
    },  
    mutations: {
        setCategories(state, val) {
            if (val) {
                state.categories = val
            } else {
                state.categories = []
            }
        }
    }
})