<template lang="pug">
    .products-grid
        template(v-for="product in products")
            product-card(:data="product")
</template>

<script>
    import ProductCard from '@/components/ProductCard'
    import { mapGetters, mapActions } from 'vuex'

    export default {
        components: {
            'product-card': ProductCard
        },
        computed: mapGetters({
            products: 'getProducts'
        }),
        methods: mapActions([
            'fetchProducts',
            'selectProduct'
        ]),
        mounted() {
            this.fetchProducts()
        }
    }
</script>

<style lang="sass">
    .products-grid
        width: 100%
        // height: 100%
        padding-top: 15px
        overflow-y: auto
</style>
