<template>
  <div>
    <button id="add-to-cart" @click="addToCart(product)">Click</button>
    <button id="remove-from-cart" @click="removeFromCart(product)">Click</button>
    <button id="close-microcart" @click="closeMicrocart">Click</button>
    <button id="open-microcart" @click="openMicrocart">Click</button>
  </div>
</template>

<script>
import { 
  addToCart, 
  removeFromCart, 
  productsInCart, 
  closeMicrocart,
  openMicrocart,
  isMicrocartOpen
} from '../index.js'

export default {
  data () {
    return {
      product: 'productString'
    }
  },
  mixins: [
    addToCart, 
    removeFromCart, 
    productsInCart, 
    closeMicrocart,
    openMicrocart,
    isMicrocartOpen
  ]
}
</script>

<template>
  <!-- Examples of usage -->
  <div>
    <button id="add-to-cart" @click="addToCart(product)">addproduct to cart</button>
    <button id="remove-from-cart" @click="removeFromCart(product)">Remove product from cart</button>
    <button id="close-microcart" @click="closeMicrocart">close microcart</button>
    <button id="open-microcart" @click="openMicrocart">Open microcart</button>
  </div>
</template>

<script>
// Just import the features that you need in the view grouped in modules
import { 
  addToCart, 
  removeFromCart, 
  productsInCart, 
  closeMicrocart,
  openMicrocart,
  isMicrocartOpen
} from 'core/api/cart'

export default {
  data () {
    return {
      product: 'productObjectMock'
    }
  },
  // And register them as a mixins
  mixins: [
    addToCart, 
    removeFromCart, 
    productsInCart, 
    closeMicrocart,
    openMicrocart,
    isMicrocartOpen
  ]
}
</script>

Test Instance for core cart module updated with examples
Test Instance for core cart module updated with examples
