来自 sessionStorage 的对象在 vuejs/vuex 中没有反应
Object from sessionStorage not reactive in vuejs / vuex
我知道这是一个菜鸟问题,但尽管浏览了不同的帖子,我还是无法弄清楚。请帮忙。
我正在用 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)
},
您当前代码中的错误是您试图将旧购物车推入当前购物车,就好像它(旧购物车)是一件商品一样。您实际上应该将旧购物车分配给新购物车
restoreCart(state, found_cart) {
state.cart = found_cart;
},
这取决于您如何使用商店读取当前购物车内容,但当您恢复旧购物车时,类似这样的内容会立即更新:
<div v-for="item in $store.state.cart" :key="item.id">
{{ item.name }}
</div>
我知道这是一个菜鸟问题,但尽管浏览了不同的帖子,我还是无法弄清楚。请帮忙。
我正在用 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)
},
您当前代码中的错误是您试图将旧购物车推入当前购物车,就好像它(旧购物车)是一件商品一样。您实际上应该将旧购物车分配给新购物车
restoreCart(state, found_cart) {
state.cart = found_cart;
},
这取决于您如何使用商店读取当前购物车内容,但当您恢复旧购物车时,类似这样的内容会立即更新:
<div v-for="item in $store.state.cart" :key="item.id">
{{ item.name }}
</div>