Vuex、Vuexfire：如何将数据从 firestore 获取到前端？

如何解决Vuex、Vuexfire：如何将数据从 firestore 获取到前端？

我在 firestore 中有一些数据，想在我的 vue 应用中显示它。

火店：

测试.vue

<template>
  <p>{{ items }}</p>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: mapState(["items"]),methods: {
    getItems() {
      this.$store.dispatch("bindItems");
    },},mounted() {
    this.getItems();
  },};
</script>

index.js

import { createStore } from "vuex";

import { firestoreAction } from "vuexfire";
import { vuexfireMutations } from "vuexfire";

import { db } from "./db";

const store = createStore({
  state() {
    return {
      items: [],};
  },actions: {
    bindItems: firestoreAction(({ bindFirestoreRef }) => {
      return bindFirestoreRef("items",db.collection("items"));
    }),mutations: {
    ...vuexfireMutations,getters: {
    items(state) {
      return state.items;
    },});

store.subscribe((state) => console.log(state));

export default store;

为了查看我的商店，我在 index.js 中添加了这一行：store.subscribe((state) => console.log(state));。事实证明，来自 firestore 的数据实际上已发送到我的商店：

为什么前端不渲染？我需要改变什么才能让它出现？

---

编辑。 当我对我的商店中的一些数据进行硬编码并从 monuted 钩子中删除 this.$store.dispatch("bisndItems"); 时，数据被呈现：

state() {
  return {
    items: {"name": "peter"},};
},