買い物かごから購入をキャンセルする場合の処理の正しい書き方

Question

Vuexを本格的に学習しようとして、以下のページを参照しながら買い物かごの制御を作ってみました。
shopping-cart
【vue.js】ショッピングカートを作ってVuexを理解

このページも説明不足なところがありそのままでは動かず、原本や他のVuexの学習用記事なども参考にしながら知識を補っていき一旦は動く形にしたので、更に発展的学習のため、買い物のキャンセル機能を導入してみました。

なお、使用Vue及び記法はVue2.xです。

任意のプロジェクト
 - src
   - components
     ProductList.vue //子コンポーネント（商品一覧部分）
     Shop.vue //親コンポーネント
     ShoppingCart.vue //子コンポーネント（買い物かご部分）
   - store
     index.js

shop.vue

<template>
  <div>
    <h1>Shopping Cart Example</h1>
    <hr>
    <h2>商品一覧</h2>
    <ProductList/><!-- 商品一覧のコンポーネント -->
		<hr>
		<ShoppingCart/><!-- 買い物かごのコンポーネント -->
  </div>
</template>
<script>
import ProductList from './ProductList.vue'
import ShoppingCart from './ShoppingCart.vue'

export default {
  components: { ProductList,ShoppingCart }
}
</script>

productList.vue

<template>
	<ul>
		<li v-for="product in products" :key="product.id">
			{{ product.title }} - {{ product.price }}
			<button 
				@click="addProductToCart(product)"
				:disabled="!product.inventory"
			>かごに入れる</button>
		</li>
	</ul>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default{
	computed:
		mapState(['products']),
	methods:
		mapActions(['addProductToCart']),
	created(){
		this.$store.dispatch('getAllProducts')
	}
}
</script>

ShoppingCart.vue

<template>
  <div class="cart">
    <h2>あなたの買い物かご</h2>
    <p v-show="cartProducts.length"><i>購入された商品が加算されていきます</i></p>
    <ul>
      <li
        v-for="product in cartProducts"
        :key="product.id">
        {{ product.title }} - {{ product.price }} x {{ product.quantity }}
      </li>
    </ul>
		<p>合計: {{ cartTotalPrice }}円</p>
		<p><button
			:disabled="!cartProducts.length"
			@click="avoidShopping(cartProducts)"
		>キャンセル</button></p>
		<p><button 
			:disabled="!cartProducts.length"
			@click="checkout(cartProducts)"
		>購入</button></p>
		<p v-show="checkoutStatus">購入{{ checkoutStatus }}</p>
  </div>
</template>

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

export default {
  computed:{ 
		...mapGetters(['cartProducts','cartTotalPrice']),
		...mapState(['checkoutStatus']),
	},
	methods: {
		//精算処理
		checkout (products){
			this.$store.dispatch('checkout',products)
		},
		//購入キャンセル（今回の質問部分に関与するメソッド）
		avoidShopping(cartProducts){
			this.$store.dispatch('avoidShopping',cartProducts)
		},
	},
}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import shop from '@/api/shop.js'

export default new Vuex.Store({
  state: {
		products : [], //商品一覧
		items: [], //買い物かごの中身
		returns: [], //返却リスト
		checkoutStatus: null, //購入処理の判定フラグ
  },
	//データの更新
  mutations: {
		//商品の設定
		setProducts(state, products){
			state.products = products;
		},
		//カートへの投入
		pushProductToCart(state, product){
			state.items.push({
				id: product.id,
				quantity: 1,
			})
		},
		//在庫への差し戻し
		returnCartToProduct(state,cartItem){
                 /*今回の質問部分（詳細は後述*/
		},
		//数量の加算
		incrementItemQuantity(state,{ id}){
			const cartItem = state.items.find(item => item.id === id);
			cartItem.quantity++;
		},
		//在庫の減算
		decrementProductInventory(state, { id }){
			const product = state.products.find( product => product.id === id)
			product.inventory--;
		},
		//買い物かごの設定
		setCartItems(state,{items}){
			state.items = items
		},
		//購入処理の設定
		setCheckoutStatus(state,status){
			state.checkoutStatus = status
		}
  },
	//データの反映
  actions: {
		//商品の出力
		getAllProducts(context){
			shop.getProducts(products => {
				context.commit('setProducts', products);
			})
		},
		//買い物かごへの追加と在庫の管理
		addProductToCart({state,commit},product){
			const cartItem = state.items.find(item => item.id === product.id) //該当商品を制御
			//console.log(cartItem)
			if(!cartItem){
				commit('pushProductToCart',product) //カートに商品追加
			}else{
				commit('incrementItemQuantity',cartItem) //カート内商品を加算
			}
			commit('decrementProductInventory',product) //在庫の減算
		},
		//買い物完了後の処理
		checkout({state,commit}, products){
			const savedCartItems = state.items
			commit('setCheckoutStatus','購入前')
			//買い物かごを空にする
			commit('setCartItems',{items: []})
			
			shop.buyProducts(
				products,
				()=> commit('setCheckoutStatus','完了'),
				()=>{
					commit('setCheckoutStatus','失敗')
					commit('setCartItems',{items: savedCartItems})
				}
				
			)
		},
		//購入のキャンセル（今回の質問に関与するaction）
		avoidShopping({state,commit},products){
			commit('returnCartToProduct',{products}) //商品の在庫への返却
			commit('setCartItems',{items: []}) //買い物かごを空にする
		}
  },
  getters:{
		//カートの反映
		cartProducts: state =>{
			return state.items.map(item =>{
				const product = state.products.find(product => product.id === item.id)
				return{
					title: product.title,
					price: product.price,
					quantity: item.quantity,
				}
			})
		},
		//金額の勘定
		cartTotalPrice: (state,getters)=>{
			return getters.cartProducts.reduce((total,product)=>{
				return total + product.price * product.quantity //累計　+ 単価*数量
			},0)
		}
	}
})

前提・実現したいこと

購入キャンセル機能の実装。キャンセルボタンが押下されたタイミングで、買い物かごを空にし、在庫に対し、買い物かごに入った数量をそのまま差し戻す。ただし、購入処理が行われたものに対しては在庫として加算されない。

試したこと

色々試してみて実現させてみた(いちおう希望通りの動きは実現しています)のが以下のコードですが、引数も使用していないし、なにか方法が冗長にも感じます。もっとVuexに相応しい、適切な記述方法はないものでしょうか？

mutations:{
    returnToProduct(state,cartItem){
	    let returns = state.returns //キャンセル（在庫変更）リスト
	    let items = state.items //買い物かご変更用の在庫数量
	    returns = state.items.map(item =>{return item.id}) //在庫変更に対応したidの抽出
	    state.products.forEach((p,key)=>{
		    if(returns.indexOf(p.id) !== -1){
			    let idx = returns.indexOf(p.id) //在庫変更が必要な商品のid
			    p.inventory = p.inventory + items[idx].quantity //現在庫＋買い物かごの数量
		    }
	    })
    }
}