Нумерация предметов из магазина Vuex

Question

Я делаю нумерацию данных из Vuex Store, я могу сделать это успешно, но у меня возникает проблема при добавлении данных в корзину.Я могу добавить только один элемент в корзину, при добавлении второго элемента появляется ошибка «Не удается прочитать свойство» с неопределенным идентификатором.

Я переключился на использование сопоставления состояний Vuex, которое работаетно я все еще получаю ошибку.Я использую этот пакет https://github.com/vueschool/learn-vuex.

Component.vue

<template>
<div>
<ul>
 <li class="d-s-i al-l" v-for="product in products" :key="product.id">
{{ product.name }} - {{ product.price}}
<button @click="addProductToCart(product)">
 Add to cart
</button>
</li>
<div class="paginate">
 <pagination :data="pages" @pagination-change-page="fetchProducts"> 
 </pagination>
</div>
</div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
  export default {
computed: {
      ...mapState({
        products: state => state.products.items,
        pages: state => state.products.productMeta
      })
      },
  methods: {
      ...mapActions({
        fetchProducts: 'products/fetchProducts',
        addProductToCart: 'cart/addProductToCart'
      })
    },
    created () {
      this.loading = true
      this.fetchProducts();
    }
}
</script>

Product State
export default {
  namespaced: true,

  state: {
    items: [],
    productMeta: {}
  },
mutations: {
    setProducts (state, products) {
      // update products
      state.items = products
    },
    setPagination (state, products) {
      // update products
      state.productMeta = products
    },
actions: {
    fetchProducts({commit}, page=1) {
      axios.get('/products?page=' + page).then(response => {
          commit('setProducts', response.data.data)
          commit('setPagination', response.data)
        })
      }
    }
}

Cart State
export default {
  namespaced: true,

  state: {
    // {id, quantity}
    items: [],
    checkoutStatus: null
  },
getters: {
    cartProducts (state, getters, rootState, rootGetters) {
      return state.items.map(cartItem => {
        const product = rootState.products.items.find(product => product.id === cartItem.id)
        return {
          id: product.id,
          name: product.name,
          slug: product.slug,
          price: product.price,
          quantity: cartItem.quantity
        }
      })
    },
mutations: {
    pushProductToCart (state, productId) {
      state.items.push({
        id: productId,
        quantity: 1
      });
    },
actions: {
    addProductToCart({state, getters, commit, rootState, rootGetters}, product) {
      if (rootGetters['products/productIsInStock'](product)) {
        const cartItem = state.items.find(item => item.id === product.id)
        if (!cartItem) {
          commit('pushProductToCart', product.id)
        } else {
          commit('incrementItemQuantity', cartItem)
        }
        commit('products/decrementProductInventory', product, {root: true})
      }
    }
}
}

Laravel Controller
public function newproducts()
  {
    $products = Product::latest()->paginate(10);
    return response()->json($products);
  }

Ошибка действительно странная, так как добавляется один элемент, но при добавлении второго выдается ошибка.

Первое изображение показывает загруженные состоянияна странице 1

Второе изображение показывает, что состояния не загружаются после перехода на страницу 2

Iтакже обнаружил, что наоборот, если я сначала перехожу на вторую страницу, товары со страницы 2 успешно добавляются в корзину, но когда я возвращаюсь на страницу 1, я получаю сообщение об ошибке, и состояния не загружаются.