如何将 Firestore 集合加载到 Vuex 状态？答案

【问题标题】：How to load firestore collection to Vuex State?如何将 Firestore 集合加载到 Vuex 状态？
【发布时间】：2020-04-30 12:16:09
【问题描述】：

我的目标是将 Firestore 集合加载到 Vuex 状态并将其用于多个页面。我试图关注：
How to get collection from firestore and set to vuex state when the app is rendered?

我关注了这篇文章，或者我遗漏了什么，或者代码可能已经过时了？我对 Vuex 很陌生，所以我可能做错了，但我不确定。

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
const db = require('../components/fbInit')


Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    categories: []
  },
  actions: {
    fetchCategories({ commit }) {
      db.collection('one').get().then(querySnapshot => {
        if (querySnapshot.empty) {
          // eslint-disable-next-line no-console
          console.log('cannot find')
          //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;

One.vue

<template>
  <div class="flex-row justify-center ma-12">
    <ul>
      <li v-for="category in categories" :key="category.name">{{category.name}}</li>
    </ul>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
// eslint-disable-next-line no-unused-vars

export default {
  computed: {
    categories() {
      return this.$store.state.categories;
    },

    ...mapGetters([])
  },
  methods: {
    ...mapActions(["fetchCatagories"])
  }
};
</script>

我测试了 Firestore 是否已连接并显示其内容。但是我收到了这个错误：Uncaught TypeError: db.collection is not a function。

我一直无法将我的 firestore 集合加载到 Vuex 存储状态并加载它。再次，我是使用 vuex 的新手，所以任何帮助都将不胜感激

TLDR;目标：加载firestore collection('One')，将其存储在Vuex状态，使用Vuex store在多个页面上加载相同的数据，而不必在每个页面上调用数据。

【问题讨论】：

您似乎没有添加任何吸气剂。就像动作和突变一样，它将是 Vuex 存储的属性。使用 mapGetters 时，还应包含要映射的 getter 的名称。
我确实有一个，但在它不起作用后将其取出。但我的第一个障碍是试图弄清楚为什么会出现错误：db.collection is not a function。我认为如果加载了集合，我仍然可以从计算的类别函数中获取数据。我对 Vuex 很陌生...
我明白了。听起来Firestore没有被正确导入。您还可以混合使用 Common.js 和 ES6 模块。怎么样：从'../components/fbInit'导入数据库
哇，我觉得自己很笨。你的两个建议都很棒。谢谢老哥！
别觉得自己笨。任何人都很容易犯最基本的错误。

标签： javascript firebase vue.js google-cloud-firestore vuex

【解决方案1】：

const db = require('../components/fbInit') 可能是您的问题。在我拥有的一个 firestore/vue 项目中，我的数据库被声明为：

import firebase from '../firebase';
const db = firebase.firestore();

【讨论】：

这是在我的 fbInit 文件中声明的方式。不过谢谢。

【解决方案2】：

存储/index.js

const store = new Vuex.Store({
....
getters: {
    categories (state) {
        return state.categories;
    }
},
....
});

One.vue

export default {
....
    computed: {
        ...mapGetters(['categories'])
    },
....
}

【讨论】：