突变未更新Vuex中的数据

Question

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

数据来自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对象中添加任何新对象。所有其他动作都在起作用，但这种突变的阳离子不起作用。如有帮助，不胜感激。我是新手。

Answer 1

因为eachCategoryItems的新属性不是反应性的，所以您需要Vue集

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