在 Vuex Store 中分页时维护状态

我正在对来自 Vuex 商店的数据进行分页，我能够成功完成此操作，但在将数据添加到购物车时遇到问题。我只能将一项添加到购物车中，添加第二项时出现“无法读取未定义的属性‘id’”错误。

我已经改用 Vuex 状态映射，它可以工作，但我仍然收到错误。我正在使用这个包https://github.com/vueschool/learn-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);
  }

该错误确实很奇怪，因为添加了一个项目，但添加第二个项目（从另一页）会引发错误。

The first image shows the loaded states on page 1

The second image shows that the states aren't loaded after navigating to page 2

我还发现反之亦然，如果我先导航到第二页，第 2 页上的产品会成功添加到购物车，但当我切换回第 1 页时，我收到错误并且状态未加载。