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

<template>
  <section class="flag-collection">
    <h3>{{collection.name}}</h3>
    <ul v-if="loadedItems">
      <li
        v-for="item in loadedItems"
        :key="item.id"
      >{{item.attributes.title}}</li>
    </ul>
    <span v-else class="loading">Loading</span>
  </section>
</template>

<script>
import { mapState, mapActions } from 'vuex'

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() {
    this.unsubscribe = this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'User/setLoadedCollItems') {
        this.loadedItems = state.User.flagcolls[this.collection.id].loadedItems
      }
    });
  },
  beforeDestroy() {
    this.unsubscribe()
  },
  // beforeMount () {
  //   if (typeof this.flagcolls[collection.id].loadedItems === 'undefined') {
  //     this.
  //   }
  // },
  // methods: {
  //   ...mapActions({
  //     loadFlagCollItems: 'User/loadFlagCollItems'
  //   })
  // }
}
</script>
<style lang="scss" scoped>
</style>