0

因此，我的一个突变从状态中的数组中获取数据并将其添加到对象中。

数据来自firebase，但sortItems无法正常工作。

store.js 文件：

import Vue from "vue";
import Vuex from "vuex";
import { vuexfireMutations, firestoreAction } from "vuexfire";
import { db, getStoreID } from "@/main";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    storeDetails: null,
    storeCategories: null,
    storeItems:null,
    eachCategoryItems: {
    },
    drawer: false,
    items: [
      { text: "Home", to: "/%id%/home", icon: "home" },
      { text: "Categories", to: "/%id%/categories", icon: "rounded_corner" },
      { text: "Bag", to: "/%id%/bag", icon: "rounded_corner" },
      { text: "Orders", to: "/%id%/orders", icon: "toc" }
    ]
  },
  mutations: {
    ...vuexfireMutations,
    sortItems: state => {
      state.storeItems.forEach(item => {
        if(!state.eachCategoryItems[item.CATEGORY])
          state.eachCategoryItems[item.CATEGORY] = [item];
        else
          state.eachCategoryItems[item.CATEGORY].push(item);
      })
    }
  },
  getters: {
    links: state => {
      return state.items;
    },
    storeDetails: state => {
      return state.storeDetails;
    },
    storeCategories: state => {
      return state.storeCategories;
    },
    storeItems: state => {
      return state.storeItems;
    }
  },

  actions: {
    bindStoreDetails: firestoreAction(({ bindFirestoreRef }) => {
      let docID = getStoreID();
      return bindFirestoreRef(
        "storeDetails",
        db.collection("STORES").doc(docID)
      );
    }),
    bindStoreCategories: firestoreAction(({ bindFirestoreRef }) => {
      let docID = getStoreID();
      return bindFirestoreRef(
        "storeCategories",
        db
          .collection("STORES")
          .doc(docID)
          .collection("CATEGORIES")
      );
    }),
    bindStoreItems: firestoreAction(({bindFirestoreRef}) => {
      let docID = getStoreID();
      return bindFirestoreRef(
        "storeItems",
          db.collection("STORES").doc(docID).collection("ITEMS")
      )
    }),
    sortItems: context => {
      context.commit("sortItems")
    }
  }
});

我调用所有突变的组件：

<template>
  <v-main class="pa-0">
    <v-container fluid class="my-2">
      <v-layout wrap align-center justify-center row fill-height>
        <v-flex xs12 md10>
          <HomeStartScreen />
        </v-flex>
      </v-layout>
    </v-container>

    <v-container fluid class="my-2">
      <v-layout wrap align-center justify-center row fill-height>
        <v-flex xs12 md10 class="">
          <HomeDataDisplay />
        </v-flex>
      </v-layout>
    </v-container>
    <hr style="height: 1px; background-color: #888888;" />
    <v-container fluid class="my-2">
      <v-layout wrap align-center justify-center row fill-height>
        <v-flex xs12 md10 class="">
          <home-category-parent></home-category-parent>
        </v-flex>
      </v-layout>
    </v-container>
  </v-main>
</template>

<script>
import HomeStartScreen from "@/components/home/HomeStartScreen";
import HomeDataDisplay from "@/components/home/HomeDataDisplay";
// import HomeCategories from "../components/home/HomeCategories";
import HomeCategoryParent from "@/components/home/HomeCategoryParent";

export default {
  components: {
    HomeStartScreen,
    HomeDataDisplay,
    // HomeCategories,
    HomeCategoryParent,
  },
  created() {
    this.$store.dispatch("bindStoreCategories");
    this.$store.dispatch("bindStoreCategories");
    this.$store.dispatch("bindStoreItems");
    this.$store.dispatch("sortItems");
  },
};
</script>

突变不会在对象中添加任何新eachCategoryItems对象。所有其他动作都在起作用，但这种突变的阳离子不起作用。一些帮助将不胜感激。我是新来的。

4

1 回答 1

0

因为新的属性eachCategoryItems 不是reactive的，所以需要Vue set

     if(!state.eachCategoryItems[item.CATEGORY])
          Vue.set(state.eachCategoryItems, item.CATEGORY, [item]);
        else
          state.eachCategoryItems[item.CATEGORY].push(item);
于 2020-08-23T14:13:22.210 回答