0

我知道这是一个菜鸟问题，但尽管浏览了不同的帖子，我还是无法弄清楚。请帮忙。我正在用 Vue 和 Vuex 构建一个购物车。我将购物车的内容存储在其中，sessionStorage以便在用户刷新时它仍然存在。

当页面加载时，我能够从会话中检索购物车并将其添加到 vuex 状态，但它不会反映在 DOM 中，直到我将新项目添加到购物车中。我该如何解决这个问题？

这是我的代码：我检查是否有任何会话beforeUpdate：

beforeUpdate() {
  // this fires twice. why?
  let cart = this.store_slug + '_cart'
  found_cart = JSON.parse(sessionStorage.getItem(cart))
  if (found_cart) {
    this.$store.commit('restoreCart', found_cart)
  }
},

这是我的'restoreCart'突变：

restoreCart(state, found_cart) {
  state.cart.push(found_cart)
},
4

1 回答 1

1

当前代码中的错误是您试图将旧购物车推入当前购物车，就好像它（旧购物车）是产品一样。您实际上应该将旧购物车分配给新购物车

restoreCart(state, found_cart) {
  state.cart = found_cart;
},

这取决于您如何使用商店来读取当前购物车内容，但是当您恢复旧购物车时，类似这样的内容会立即更新：

<div v-for="item in $store.state.cart" :key="item.id">
{{ item.name }}
</div>
于 2020-06-16T17:28:16.667 回答