Mutation not updating data in Vuex

Question

So one of my mutations takes the data from a an array from the state and adds it to an object.

The data is coming from firebase but the sortItems is not working.

The store.js file:

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")
    }
  }
});

The component where I am calling all the mutations:

<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>

The mutation does not add any new objects in the eachCategoryItems object. All other actions are working but the cation for this mutation does not work. Some help would be appreciated. I am new to this.

Answer 1

Because the new property of eachCategoryItems is not reactive, so you need the Vue set

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