title: Nuxt increment button using a mutation/action
body: <p>I'm trying to add an increment/increase function to my button that'll update the items quantity in my minicart. While it works well in a method, Nuxt wants it to be in a mutation and I'm unsure of how to achieve this.</p>
  <p>I would really appreciate any help and also advice on how to improve my code as this is my first Nuxt project.</p>
  <p>Thanks in advance!</p>
  <p>Vue component</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;bg-white shadow-lg rounded-md absolute right-16&quot;&gt;
      &lt;div
        class=&quot;grid grid-cols-2 m-5 mt-9&quot;
        v-for=&quot;carts in cart&quot;
        :key=&quot;carts&quot;
      &gt;
        &lt;img class=&quot;w-24 rounded&quot; :src=&quot;carts.img&quot; alt=&quot;&quot; /&gt;
        &lt;div class=&quot;grid grid-rows-2&quot;&gt;
          &lt;strong class=&quot;tracking-wider text-center text-lg font-bold&quot;&gt;{{
            carts.title
          }}&lt;/strong&gt;
  
          &lt;div class=&quot;grid grid-cols-4 text-center&quot;&gt;
            &lt;button
              class=&quot;
                text-lg
                font-bold
                text-purple-500
                bg-purple-200
                rounded
                transition-all
                hover:bg-purple-300
              &quot;
              type=&quot;button&quot;
              v-on:click=&quot;increase(carts.id)&quot;
            &gt;
              +
            &lt;/button&gt;
            &lt;p class=&quot;text-gray-500 mt-0.5 leading-9 font-normal&quot;&gt;
              {{ carts.quantity }}
            &lt;/p&gt;
            &lt;button
              class=&quot;
                text-lg
                font-bold
                text-purple-500
                bg-purple-200
                rounded
                transition-all
                hover:bg-purple-300
              &quot;
              type=&quot;button&quot;
              v-on:click=&quot;decrease(carts)&quot;
            &gt;
              -
            &lt;/button&gt;
            &lt;button
              class=&quot;
                bg-gray-200
                rounded
                p-2
                tracking-wider
                font-bold
                ml-4
                text-gray-500
                transition-all
                hover:bg-gray-300
              &quot;
              v-on:click=&quot;removeItem(carts)&quot;
            &gt;
              ️
            &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;p
            class=&quot;
              text-base
              tracking-wider
              mt-2
              text-center text-gray-500
              font-medium
            &quot;
          &gt;
            ${{ carts.price }}
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;flex mx-5 my-8 justify-between&quot;&gt;
        &lt;span
          class=&quot;
            tracking-wider
            text-lg
            p-4
            font-medium
            justify-center
            align-middle
          &quot;
          &gt;Total: ${{ total }}&lt;/span
        &gt;
        &lt;button
          v-on:click=&quot;clearCart&quot;
          type=&quot;button&quot;
          href=&quot;&quot;
          class=&quot;
            bg-red-400
            transition-all
            hover:bg-red-500
            p-4
            rounded
            tracking-wider
            text-white text-medium
            font-medium
            leading-none
          &quot;
        &gt;
          Clear Cart
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapGetters } from &quot;vuex&quot;;
  export default {
    computed: mapGetters({
      cart: &quot;cart&quot;,
      total: &quot;total&quot;,
    }),
    methods: {
      removeItem(carts) {
        this.$store.dispatch(&quot;removeItem&quot;, carts);
      },
      increase(carts) {
        this.$store.commit(&quot;increase&quot;, carts);
      },
      decrease(carts) {
        this.$store.dispatch(&quot;decrease&quot;, carts);
      },
      clearCart() {
        this.$store.dispatch(&quot;clearCart&quot;);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>Store</p>
  <pre><code>export const state = () =&gt; ({
      cart: [
  
      ],
      breeds: [
          {
              id: 1,
              title: &quot;Peruvian&quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-breeds-peruvian-1549311589.jpg?crop=0.641xw:1.00xh;0.295xw,0&amp;resize=768:*&quot;,
              description: &quot;The Peruvian's coat is the envy among all the breeds. The smooth, straight fur can grow as long as 2 feet! The soft, thick fur needs dedicated grooming time and an occasional trim. The coat also grows forward over its head, giving it a sweet fringe. This breed is known to be alert and curious, often greeting visitors who stop by its cage. A Peruvian Satin breed also exists.&quot;,
              quantity: 1
  
  
          },
          {
              id: 2,
              title: &quot;Abyssinian &quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-breeds-abyssinian-1549298269.jpg?crop=0.672xw:1.00xh;0.100xw,0&amp;resize=768:*&quot;,
              description: 'The Abyssinian is a great choice for first-time owners because of its extremely affectionate personality. It requires only a bit of training in its eight-year lifespan. Recognize one by spotting eight symmetrical swirls (formally called rosettes), giving it a messy hairdo. You can also adopt the Abyssinian Satin breed which has a glossy fur.',
              quantity: 1
          },
          {
              id: 3,
              title: &quot;American&quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-breeds-american-1549298804.jpg?crop=1.00xw:0.669xh;0,0.306xh&amp;resize=768:*&quot;,
              description: &quot;As the most common breed, the American Guinea Pig by default wins the popularity contest. They are known for their great temperament and also get along well with other piggies. Its short, smooth coat makes it easy to take of, particularly for children. &quot;,
              quantity: 1
          },
          {
              id: 4,
              title: &quot;Teddy&quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-breeds-teddy-1549311889.jpg?crop=0.667xw:1.00xh;0.136xw,0&amp;resize=768:*&quot;,
              description: &quot;Nicknamed after the famous stuffed animal, the Teddy is an easier breed to keep up with. Its short, dense coat only needs a brushing once in a while. This breed make a playful, loving partner for children. Being social with other piggies is in their DNA, but you may need to watch how they react to sharing a cage. Teddy Satin guinea pigs can also be adopted.&quot;,
              quantity: 1
          },
          {
              id: 5,
              title: &quot;Texel&quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-portrait-royalty-free-image-892069972-1549485464.jpg?crop=0.668xw:1.00xh;0.0391xw,0&amp;resize=768:*&quot;,
              description: &quot;Texels are a rare cross breed between a Silkie and a Rex. Tangling will happen with their fur, and it can be difficult to take care of. They are known for winning first place at shows, but they make great pets as well.&quot;,
              quantity: 1
          },
          {
              id: 6,
              title: &quot;Silkie &quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-breeds-silkie-1549311704.jpg?crop=0.705xw:1.00xh;0,0&amp;resize=768:*&quot;,
              description: &quot;The Silkie (also named the Sheltie) has long locks which only grow backwards. Discovered in the 1970s by breeders in the UK, they are described as being the most gentle breed with laid back personalities. Because of the extensive grooming needs, they should only be cared for by adults. A Silkie Satin is another breed that can be found.&quot;,
              quantity: 1
          },
          {
              id: 7,
              title: &quot;Rex&quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-breeds-rex-1549312413.jpg?crop=0.763xw:1.00xh;0.0587xw,0&amp;resize=768:*&quot;,
              description: &quot;The Rex has short, wool-like fur and is a big hit with children. Its droopy ears are a unique feature that make it look even more lovable. This breed likes to be held close and petted. With those curly whiskers, who could resist! It isn't recognized by the ACBA.&quot;,
              quantity: 1
          },
          {
              id: 8,
              title: &quot;White-Crested&quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-breeds-white-crested-1549312144.jpg?crop=0.663xw:1.00xh;0.0864xw,0&amp;resize=768:*&quot;,
              description: &quot;The white crown atop of its head gave the breed its name. It can be considered the cousin of the American — sharing a short, smooth coat. They are shy, but smart creatures. Don't be surprised if yours quickly learns when it's time to eat or even recognizes your voice.&quot;,
              quantity: 1
          },
          {
              id: 9,
              title: &quot;Himalayan&quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-breeds-himalayan-1549311375.jpg?crop=0.680xw:1.00xh;0.0415xw,0&amp;resize=768:*&quot;,
              description: &quot;Himalayans are considered the Siamese cats of the guinea pig world. This albino breed has a white coat with brown or black coloring on its ears, feet, and nose. This breed is recommended for people who live in a colder climate, and away from sun. When a Himalayan is put in direct sunlight or in hot weather, their dark spots fade. This also happens if the guinea is sick, shocked, or scared. They do best indoors and can live up to seven years. The breed isn't officially recognized by the ACBA. &quot;,
              quantity: 1
          },
          {
              id: 10,
              title: &quot;Sheba &quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-breeds-sheba-1549313864.jpg?crop=0.753xw:1.00xh;0.131xw,0&amp;resize=768:*&quot;,
              description: &quot;The Sheba, formally known as the Sheba Mini Yak, is affectionally called the Bad Hair Day guinea pig. There will always be time for bonding thanks to its dense fur that requires daily maintenance. It isn't officially recognized by the ACBA&quot;,
              quantity: 1
          },
          {
              id: 11,
              title: &quot;Merino&quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-breeds-merino-1549311503.jpg?crop=0.668xw:1.00xh;0.193xw,0&amp;resize=768:*&quot;,
              description: &quot;Merinos are an intelligent breed who enjoy exploring. It's ideal to provide a large cage and even roaming time around your home (supervised, of course!). Because of its affectionate nature, it's a popular choice for owners, but not officially recognized.&quot;,
              quantity: 1
          },
          {
              id: 12,
              title: &quot;Lunkarya&quot;,
              price: &quot;99.99&quot;,
              img: &quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/guinea-pig-breeds-lunkarya-1549313622.jpg?crop=0.675xw:1.00xh;0.233xw,0&amp;resize=768:*&quot;,
              description: &quot;Also known as the Lunk, this guinea pig has long, rough curls. Because of the fur's thickness, it doesn't do well in extreme heat and shouldn't be near direct sun. Lunks are a curious breed that enjoy being held and can live up to eight years. The ACBA doesn't recognize it.&quot;,
              quantity: 1
          },
      ]
  });
  
  export const getters = {
      checkCart(state) {
          return state.cart;
      },
      cart(state) {
          return state.cart;
      },
      total(state) {
          let total = 0;
          for (let carts of state.cart) {
              total += carts.price * carts.quantity;
          }
          return total.toFixed(2);
      },
      cartTotal(state) {
          return state.cart.length;
      },
      getPiggyById: (state) =&gt; (id) =&gt; {
          return state.breeds.find(breed =&gt; breed.id == id)
      }
  }
  
  export const mutations = {
      pushToCart(state, breed) {
          state.cart.push(breed)
      },
      removeItem(state, carts) {
          state.cart.splice(carts, 1);
      },
      increase(state) {
          state.cart.quantity += 1;
      },
      decrease(state, carts) {
          if (carts.quantity &gt; 1) {
              carts.quantity -= 1;
          } else {
              state.cart.splice(carts, 1);
          }
      },
      clearCart(state) {
          state.cart.splice(0, state.cart.length);
      },
  };
  
  export const actions = {
      pushToCart({ commit }, breed) {
          commit(&quot;pushToCart&quot;, breed)
      },
      removeItem({ commit }, carts) {
          commit(&quot;removeItem&quot;, carts)
      },
      decrease({ commit }, carts) {
          commit(&quot;decrease&quot;, carts)
      },
      clearCart({ commit }) {
          commit(&quot;clearCart&quot;)
      },
  }
  
  
  
  </code></pre>