materio-d8/web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue

<template>
  <div id="pricing">
    <div class="loading" v-if="!products.length">
      <span>Loading ...</span>
    </div>
    <Product
      v-else
      v-for="product in products"
      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({
      products: state => state.Pages.products
    })
  },
  created(){
    if(!this.products.length)
      this.getProducts()
  },
  methods: {
    ...mapActions({
      getProducts: 'Pages/getProducts'
    })
  },
  components: {
    Product
  }
}
</script>
<style lang="scss" scoped>
</style>