Maintaining states when paginating in Vuex Store

问题

I'm paginating data from the Vuex Store, i'm able to do this successfully but i get an issue when adding data into the shopping cart. I'm only able to add one item into the cart, i get a 'Cannot read property 'id' of undefined' error when adding the second item.

I've switched to using Vuex state mapping which works but i still get the error. I'm using this package 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 error is really strange as one item is added but adding a second (from another page) throws an error.

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

I also discovered it's vice versa, if i navigate to the second page first, products on page 2 are successfully added to the cart but when i switch back to page 1, i get the error and states aren't loaded.

来源：https://stackoverflow.com/questions/58106049/maintaining-states-when-paginating-in-vuex-store

标签

laravel

Vue.js

vuejs2

vuex