ExampleShopppingCart

cart.js

import nuxtStorage from 'nuxt-storage'

export const state = () => ({
    itemsCart: [],
    initialized: false
})
  
export const mutations = {
    initializeStore(state) {
        state.initialized = true
    },
    add (state, obj) {
        const itens = [...state.itemsCart]
        itens.push(obj)
        state.itemsCart = [...itens]

        nuxtStorage.localStorage.setData('iki-cart', JSON.stringify(state.itemsCart), 60)
    },
    remove (state, idx){
        const itens = [...state.itemsCart]
        itens.splice(idx, 1)

        state.itemsCart = [...itens]
        
        nuxtStorage.localStorage.setData('iki-cart', JSON.stringify(state.itemsCart), 60)
    },
    setItems(state, items){
        state.itemsCart = [...items]
    }
}

export const actions = {
    addToCart(context, obj) {
        context.commit('add', obj)
    },
    removeToCart(context, idx){
        context.commit('remove', idx)
    },
    initializeStore(context){
        if(nuxtStorage.localStorage.getData('iki-cart')){
            let cartStorage = JSON.parse(nuxtStorage.localStorage.getData('iki-cart'))
            context.commit('setItems', cartStorage)
        }
        context.commit('initializeStore')
    }
}

export const getters = {
    items: state => {
        return state.itemsCart
    },
    sum: state => {
        let sum = 0;
        state.itemsCart.forEach(item => {
            sum += item.value
        });
        return sum
    },
    initialized: state => {
        return state.initialized
    }
}

ShoppingCart.vue

<template>
  <div class="header-cart middle-same">
    <button class="icon-cart">
      <i class="pe-7s-shopbag cart-bag"></i>
      <span
        class="count-amount"
        id="count-amount"
      >{{ sumCart | toReal }}</span>
      <i class="ion-chevron-down cart-down"></i>
      <span class="count-style">{{ itemsCart.length }}</span>
    </button>
    <div class="shopping-cart-content">
      <ul>
        <li class="single-shopping-cart" v-for="(item, idx) in itemsCart" :key="idx">
          <div class="shopping-cart-img">
            <a href="#">
              <img alt src="/img/cart/cart-1.jpg">
            </a>
          </div>
          <div class="shopping-cart-title">
            <h4>
              <a href="#">{{ item.display_name }}</a>
            </h4>
            <h6>Quantidade:
              <span>{{ item.quantity }}</span>
            </h6>
            <span>Preço: R$ {{ item.value }}</span>
          </div>
          <div class="shopping-cart-delete">
            <a href="#" @click="removeItem(idx)">
              <i class="ion-android-close"></i>
            </a>
          </div>
        </li>
      </ul>
      <div class="shopping-cart-total">
        <h4>Total :
          <span
            class="shop-total"
            id="shop-total"
          >{{ sumCart | toReal }}</span>
        </h4>
      </div>
      <div class="shopping-cart-btn">
        <a class="btn-style btn-hover" href="#">VER CARRINHO</a>
        <a class="btn-style btn-hover" href="#" v-if="itemsCart.length > 0">FINALIZAR COMPRA</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
    mounted() {
        /* Cart */
        $(".icon-cart").on("click", function() {
            $(this).parent().find('.shopping-cart-content').slideToggle('medium');
        });
    },
    computed: {
        ...mapGetters({
            itemsCart: 'cart/items',
            sumCart: 'cart/sum'
        }),
    },
    methods: {
        ...mapActions({
            remove: 'cart/removeToCart'
        }),
        removeItem(idx){
            this.$notify({
                group: 'general',
                type: 'info',
                title: 'Item removido',
                text: 'O Item foi removido com sucesso do seu carrinho de compras!'
            });
            this.remove(idx)
        }
    },
    filters: {
        toReal: (value) => {
            value = value.toLocaleString("pt",{useGrouping: false,minimumFractionDigits: 2})
            return 'R$ ' + value
        }
    }
}
</script>