变异无法更新Vuex中的数据

问题描述

所以我的一种变异是从状态数组中获取数据并将其添加到对象中。

数据来自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",{ 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对象中添加任何新对象。 所有其他动作均有效，但该突变的阳离子无效。 一些帮助，将不胜感激。我是新来的。

解决方法

由于eachCategoryItems 的新属性不具有响应性，因此您需要Vue set

     if(!state.eachCategoryItems[item.CATEGORY])
          Vue.set(state.eachCategoryItems,item.CATEGORY,[item]);
        else
          state.eachCategoryItems[item.CATEGORY].push(item);