<template>
  <div id="pricing">
    <div class="loading" v-if="!pricing.length">
      <span>Loading ...</span>
    </div>
    <Product
      v-else
      v-for="product in pricing"
      v-bind:key="product.uuid"
      :product="product"
    />
  </div>
</template>

<script>

import Product from 'vuejs/components/Content/Product'
import { mapState, mapActions } from 'vuex'

export default {
  name: "Pricing",
  // data() {
  //   return {
  //     items:[],
  //     page:0
  //   }
  // },
  computed: {
    ...mapState({
      pricing: state => state.Pages.pricing
    })
  },
  created(){
    if(!this.pricing.length)
      this.getPricing()
  },
  methods: {
    ...mapActions({
      getPricing: 'Pages/getPricing'
    })
  },
  components: {
    Product
  }
}
</script>
<style lang="scss" scoped>
</style>
