diff --git a/src/components/ImageList.vue b/src/components/ImageList.vue index ad5437e61bd7df1925f98246a540cbedc4507cae..f946de6160fe211798bf20afbff7d8c42a659610 100644 --- a/src/components/ImageList.vue +++ b/src/components/ImageList.vue @@ -1,6 +1,10 @@ <template> <section id="list-container"> - <div id="item-container" v-for="(hash, index) in hashArray" :key="index"> + <div + id="item-container" + v-for="(hash, index) in stateHashArray" + :key="index" + > <ImageItem :hash="hash" @checked="appendToDeleteArray"></ImageItem> </div> <button v-show="deleteArray.length" @click="deleteImages(deleteArray)"> @@ -11,7 +15,7 @@ <script> import ImageItem from "@/components/ImageItem.vue"; -import { mapState } from "vuex"; +import { mapState, mapActions } from "vuex"; export default { components: { ImageItem, @@ -21,15 +25,21 @@ export default { deleteArray: [], }; }, - props: { - hashArray: { - required: true, - }, - }, computed: { - ...mapState(["stateUser"]), + ...mapState(["stateUser", "stateHashArray"]), + }, + created() { + this.updateHashArray(); }, methods: { + async updateHashArray() { + const response = await fetch("../api/image"); + const data = await response.json(); + if (data) { + this.setStateHashArray(data); + console.log("Set State Hash Array"); + } + }, appendToDeleteArray(...args) { const [checked, hash] = args; checked @@ -46,6 +56,7 @@ export default { } this.deleteArray = []; }, + ...mapActions(["setStateHashArray"]), }, }; </script> diff --git a/src/views/Home.vue b/src/views/Home.vue index 59b242f7e999784e2abba9efc46a43a7f8443b9b..61fea543023ffda6f333f1e4530669cd9a126ef8 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -7,7 +7,7 @@ <UserAuthentication class="absolute bottom-0"></UserAuthentication> </div> </section> - <ImageList :hashArray="stateHashArray"></ImageList> + <ImageList></ImageList> </div> </template> @@ -16,7 +16,6 @@ import ImageList from "@/components/ImageList.vue"; import ImageUpload from "@/components/ImageUpload.vue"; import TagCreation from "@/components/TagCreation.vue"; import UserAuthentication from "@/components/UserAuthentication.vue"; -import { mapState, mapActions } from "vuex"; export default { components: { @@ -25,23 +24,6 @@ export default { TagCreation, UserAuthentication, }, - computed: { - ...mapState(["stateHashArray"]), - }, - created() { - this.updateHashArray(); - }, - methods: { - async updateHashArray() { - const response = await fetch("../api/image"); - const data = await response.json(); - if (data) { - this.setStateHashArray(data); - console.log("Set State Hash Array"); - } - }, - ...mapActions(["setStateHashArray"]), - }, }; </script>