Объект из sessionStorage не реагирует на vuejs / vuex

Question

Я знаю, что это вопрос новичков, но я не могу его понять, несмотря на то, что просматривал разные сообщения. Пожалуйста помоги. Я создаю корзину с Vue и Vuex. Я сохраняю содержимое корзины в sessionStorage, чтобы оно сохранялось, если пользователь обновляет.

Когда страница загружается, я могу получить корзину из сеанса и добавить ее в состояние vuex, но это не так. t отражаться в 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)
},

Answer 1

Ошибка в вашем текущем коде состоит в том, что вы пытаетесь вставить sh старую корзину в текущую, как если бы она (старая корзина) была товаром. Фактически вы должны назначить старую корзину новой

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

Это зависит от того, как вы используете свой магазин для чтения текущего содержимого корзины, но что-то вроде этого будет мгновенно обновляться, когда вы восстановите старую корзину:

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