Vuex(二) —— 用Vuex完成购物车案例

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex(二) —— 用Vuex完成购物车案例相关的知识,希望对你有一定的参考价值。

参考技术A 上一节介绍了 Vuex 的核心原理及简单使用,这里来一个实际案例

②和③都依赖购物车的数据,①中点击添加购物车,主要把数据传递给②和③,②和③之间的数据修改也互相依赖,如果没有 Vuex 需要花时间精力在如何在组件中传值上。

把当前点击的商品存储到一个位置,将来在购物车列表组件中可以访问到,所以需要一个位置记录所有的购物车数据,这个数据在多个组件中可以共享,所以将这个数据放在 cart 模块中

删除商品要修改 cart 模块中的 state ,所以要在 cart 模块中添加一个 mutation

统计的过程中需要添加条件,判断当前商品是否是选中状态。

多添加商品的时候发现商品金额会出现很多位小数的问题,所以这里进行处理

刷新页面,购物车的数据就会消失,因为我们把数据添加到了内存中存储,而实际购物的时候,有两种存储方式:

现在实现本地存储的功能

vuex-cart-temp

来自 sessionStorage 的对象在 vuejs / vuex 中没有反应

【中文标题】来自 sessionStorage 的对象在 vuejs / vuex 中没有反应【英文标题】:Object from sessionStorage not reactive in vuejs / vuex 【发布时间】:2020-10-06 03:11:33 【问题描述】:

我知道这是一个菜鸟问题,但尽管浏览了不同的帖子,但我无法弄清楚。请帮忙。 我正在用 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)
,

【问题讨论】:

为什么要把卡片推入数组?您的应用程序会同时拥有超过 1 张卡吗? 感谢@IVOGELOV 这解决了我遇到的一个问题(添加到购物车是创建一个新的购物车项目,而不是更新现有的)。我没有意识到我正在将“会话”购物车推入“状态”购物车。但它仍然没有反应。 你的意思是state.cart = newObject没有任何作用? state.cart = newObjectstate.cart = found_cart 有效果。我可以在 vuejs 浏览器扩展中看到该项目在购物车中,但是当我导航到我的购物车时,这些项目没有显示。但是,如果我将新商品添加到购物车,则会同时显示新商品和旧商品。 嘿@IVOGELOV 我添加了一个后续功能,该功能在恢复购物车后使用购物车中的物品,现在显示。这与 $nextTick 具有相同的效果,尽管我无法使用 $nextTick。如果您想发布它,您的解决方案有效。谢谢! 【参考方案1】:

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

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

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

<div v-for="item in $store.state.cart" :key="item.id">
 item.name 
</div>

【讨论】:

您错过了开头 div 标签的“>”

以上是关于Vuex(二) —— 用Vuex完成购物车案例的主要内容,如果未能解决你的问题,请参考以下文章

uni-app第二节-vuex实现购物车

前段框架——VueX

vuex版购物车

来自 sessionStorage 的对象在 vuejs / vuex 中没有反应

javascript Vuex购物车

vuex的使用