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

Posted 2023-02-22

【中文标题】来自 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 = newObject 即state.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 标签的“>”