Question

我正在对Vuex商店中的数据进行分页，我能够成功完成此操作，但是在向购物车中添加数据时遇到了问题。我只能将一个项目添加到购物车中，添加第二个项目时会收到“无法读取属性'id'of undefined'错误”。

我已切换为使用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页后未加载状态

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

在Vuex商店中分页时保持状态

0 个答案: