PhotosUsers.vue

<template>
<div class="box-heading">
<h4>Фото</h4>

<el-dropdown class="is-right">
  <el-button>
    <more-vertical-icon></more-vertical-icon>
  </el-button>

  <template v-slot:dropdown>

    <el-dropdown-menu class="is-spaced is-neutral">

      <el-dropdown-item>
       <div class="media">
        <image-icon></image-icon>
        <div class="media-content">
          <h3>View Photos</h3><small>View all your photos</small>
        </div>
      </div>
    </el-dropdown-item>

    <el-dropdown-item>
      <div class="media">
        <tag-icon></tag-icon>
        <div class="media-content">
          <h3>Tagged</h3><small>View photos you are tagged in.</small>
        </div>
      </div>
    </el-dropdown-item>

    <el-dropdown-item>
     <div class="media">
      <folder-icon></folder-icon>
      <div class="media-content">
        <h3>Albums</h3><small>Open my albums.</small>
      </div>
    </div>
  </el-dropdown-item>

</el-dropdown-menu>

</template>
</el-dropdown>

</div>
<div class="is-photos-widget">
<img alt="" :src="require('@/assets/images/demo/unsplash/1.jpg')">
<img alt="" :src="require('@/assets/images/demo/unsplash/2.jpg')">
<img alt="" :src="require('@/assets/images/demo/unsplash/3.jpg')">
<img alt="" :src="require('@/assets/images/demo/unsplash/4.jpg')">
<img alt="" :src="require('@/assets/images/demo/unsplash/5.jpg')">
<img alt="" :src="require('@/assets/images/demo/unsplash/6.jpg')">
<img alt="" :src="require('@/assets/images/demo/unsplash/7.jpg')">
<img alt="" :src="require('@/assets/images/demo/unsplash/8.jpg')">
<img alt="" :src="require('@/assets/images/demo/unsplash/9.jpg')">
<img alt="" :src="require('@/assets/images/demo/unsplash/10.jpg')">
<img alt="" :src="require('@/assets/images/demo/unsplash/11.jpg')">
<img alt="" :src="require('@/assets/images/demo/unsplash/12.jpg')">
</div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

import { MoreVerticalIcon, ImageIcon, TagIcon, FolderIcon } from '@zhuowenli/vue-feather-icons'

export default {
  props: {
    userId: Number
  },
  components: {
    MoreVerticalIcon,
    ImageIcon,
    TagIcon,
    FolderIcon
  },
  setup (props) {
    const store = useStore()

    const photos = computed(() => store.getters.photos)

    store.dispatch('photos', props.userId)

    return {
      photos
    }
  }
}
</script>