如何使用Vuex和Firebase在管理视图中显示项目

我正在创建电子商店，我想存储我的可用产品，并能够从我的管理视图中编辑/删除它们。然而，当Im登录到管理视图时，它只是不显示任何可用的产品

这是我的VueX：

import Vue from 'vue'
import Vuex from 'vuex'
import { dbMenuAdd } from '../../firebase';
import firebase from 'firebase'
import 'firebase/firestore'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cart: [],
    avaibleProducts: [],
    currentUser: null
  },
  getters: {
    countOfCartProducts: state => {
      return state.cart.length
    },
    myCart: state => {
      return state.cart
    },
    getTotal: state => {
      return state.cart.reduce((total, lineItem) => Number(total) + Number(lineItem.price), 0);
    },
    currentUser: state => {
      return state.currentUser
    },
    getAvaibleProducts: state => {
      return state.avaibleProducts
    }
  },
  mutations: {
    ADD_TO_CART: (state, product) => {
      if (state.cart.findIndex(item => item.id === product.id) !== -1) {
        return
      }
      else {
        state.cart.push(product)
      }
    },
    REMOVE_FROM_CART: (state, product) => {
      state.cart.splice(product, 1)
    },
    userStatus(state, user) {
      if (user) {
        state.currentUser = user
      } else {
        state.currentUser = null
      }
    },
    setAvaibleProducts: state => {
      let avaibleProducts = []

      dbMenuAdd.onSnapshot((snapshotItems) => {
        avaibleProducts = []
        snapshotItems.forEach((doc) => {
          var avaibleItemData = doc.data();
          avaibleProducts.push({
            ...avaibleItemData,
            id: doc.id
          })
        })
      })
      state.avaibleProducts = avaibleProducts
    },
  },
  actions: {
    setUser(context, user) {
      context.commit('userStatus', user)
    },
    setAvaibleProducts: context => {
      context.commit('setAvaibleProducts')
    }
  },
  modules: {
  }
});

这是我的Admin.vue：

<template>
  <div>
    <main>
      <br />
      <br />
      <br />
      <br />
      <br />
      <div class="btn-container">
        <router-link to="/addNew">
          <button class="add-to-cart">
            ADD NEW ITEM
          </button></router-link
        >
      </div>
      <div class="wrap">
        <div id="avaible">
          <div
            class="p-avaible"
            v-for="item in avaibleProducts"
            :key="item.name"
          >
            <router-link
              @click.native="scrollToTop"
              :to="{ name: 'Product', params: { ...item } }"
            >
              <img :key="item.image" :src="item.image" />
            </router-link>
            <div class="p-name">{{ item.name }}</div>
            <div class="p-price">€{{ item.price }}</div>
            <div class="btn-container">
              <button class="remove" @click="deleteProduct(item.id)">
                REMOVE
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { dbMenuAdd } from "../../firebase";

export default {
  methods: {
    ...mapMutations(["ADD_TO_CART"]),
    addToCart(item) {
      this.ADD_TO_CART(item);
    },
    deleteProduct(id) {
      dbMenuAdd
        .doc(id)
        .delete()
        .then(function() {
          console.log("Document sucessfully deleted!");
        })
        .catch(function(error) {
          console.error("Error removing document: ", error);
        });
    },
  },
  data() {
    return {
      cart: [],
      computed: {
        showProduct() {
          const id = this.$route.params.id;
          const product = this.avaibleProducts.find((p) => p.uuid == id);
          return product;
        },
        avaibleProducts() {
          return this.$store.getters.getAvaibleProducts;
        },
      },
    };
  },
  beforeCreate() {
    return this.$store.dispatch("setAvaibleProducts");
  },
};
</script>

<style type="scss" scoped>
.edit {
  color: white;
  background-color: darkorange;
  border: 1px solid white;
  padding: 2em;
  margin: 2em;
  font-weight: bold;
}

.remove {
  color: white;
  background-color: crimson;
  border: 1px solid white;
  margin: 2em;
  padding: 2em;
  font-weight: bold;
}
</style>

添加新项目
{{item.name}
欧元{{item.price}
去除
从“vuex”导入{mapstations}；
从“../../firebase”导入{dbMenuAdd}”；
导出默认值{
方法：{
…映射突变（[“添加到购物车]），
addToCart（项目）{
此。将\添加到\购物车（项目）；
},
删除产品（id）{
dbMenuAdd
.doc（id）
1.删除（）
.然后（函数（）{
log（“文档成功删除！”）；
})
.catch（函数（错误）{
console.error（“删除文档时出错：”，错误）；
});
},
},
数据（）{
返回{
购物车：[]，
计算：{
showProduct（）{
const id=this.$route.params.id；
const product=this.availableproducts.find（（p）=>p.uuid==id）；
退货产品；
},
可用产品（）{
返回此。$store.getters.getAvailableProducts；
},
},
};
},
beforeCreate（）{
返回此。$store.dispatch（“SetAvailableProducts”）；
},
};
.编辑{
颜色：白色；
背景色：达克朗格；
边框：1px纯白；
填料：2米；
边缘：2米；
字体大小：粗体；
}
.移除{
颜色：白色；
背景颜色：深红色；
边框：1px纯白；
边缘：2米；
填料：2米；
字体大小：粗体；
}

有人知道为什么不展示产品吗？ 我是不是打错电话了？

---

请帮忙。谢谢

您可以调试以查看产品是否在商店中吗？另外，您如何声明它的工作状态。它向我展示了Vue调试器中的AvailableProducts数组，但是它是空的。你说的“但是它是空的”到底是什么意思？

AvailableProducts

阵列在商店（vuex）中是否为空？或者在组件中为空？是，在登录并转到管理员页面后，我在其中删除和添加项目。在Admin.vue中循环的数组中不存在数据库中现有的。