materio-d8/web/themes/custom/materiotheme/vuejs/components/User/FlagCollection.vue

<template>
  <section class="flag-collection">
    <header>
      <h3 class="mdi mdi-folder-outline">{{collection.name}}</h3>
      <span
        class="mdi mdi-close"
        title="close"
        @click.prevent="onCloseFlagColl"
      />
    </header>
    <ul v-if="loadedItems">
      <li
        v-for="item in loadedItems"
        :key="item.id"
      >
        <MiniCard :item="item"/>
      </li>
    </ul>
    <span v-else class="loading">Loading</span>
  </section>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import MiniCard from 'vuejs/components/Content/MiniCard'

export default {
  name: "FlagCollection",
  props: ['collection'],
  data: () => ({
    loadedItems: false
  }),
  computed: {
    ...mapState({
      flagcolls: state => state.User.flagcolls,
      openedCollid: state => state.User.openedCollid
    })
  },
  // watch: {
  //   flagcolls (newv, oldv) {
  //     console.log('watching flagcolls');
  //     if( typeof this.flagcolls[this.collection.id].loadedItems !== 'undefined' ) {
  //       this.loadedItems = this.flagcolls[this.collection.id].loadedItems
  //     }
  //   }
  // },
  created() {
    if (typeof this.collection.loadedItems !== 'undefined') {
      // if loadedItems are alredy loaded,
      // the mutation occurs before this subscription
      // so we first check if they are already available
      this.loadedItems = this.collection.loadedItems
    }

    this.unsubscribe = this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'User/setLoadedCollItems') {
        console.log("mutation setLoadedCollItems collid", this.openedCollid)
        // mutation is triggered before the component update
        // so this.collection.id is not good
        this.loadedItems = state.User.flagcolls[this.openedCollid].loadedItems
      }
    })

  },
  beforeDestroy() {
    this.unsubscribe()
  },
  // beforeMount () {
  //   if (typeof this.flagcolls[collection.id].loadedItems === 'undefined') {
  //     this.
  //   }
  // },
  methods: {
    ...mapActions({
      closeFlagColl: 'User/closeFlagColl'
    }),
    onCloseFlagColl(e) {
      this.closeFlagColl()
    }
  },
  components: {
    MiniCard
  }
}
</script>
<style lang="scss" scoped>
</style>