<template> <div class="controls"> <PauseIcon v-if="!player.paused" class="pointer" :size="50" @click="$store.dispatch('player/pause')" /> <PlayIcon v-if="player.paused" class="pointer" :size="50" @click="$store.dispatch('player/play')" /> </div> </template> <script> import PauseIcon from 'vue-material-design-icons/Pause.vue' import PlayIcon from 'vue-material-design-icons/Play.vue' export default { name: 'Controls', components: { PauseIcon, PlayIcon, }, computed: { player() { return this.$store.state.player }, }, } </script> <style scoped> .controls { display: flex; } .pointer { cursor: pointer; } </style>