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


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

16.06.2020 04:29:30 Просмотров 24 Источник

Я знаю, что это вопрос нуба, но я не могу понять его, несмотря на просмотр разных сообщений. Пожалуйста помочь. Я строю тележку для покупок с 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)
},
У вопроса есть решение - Посмотреть?

Ответы - Объект из sessionStorage не реагирует в vuejs / vuex / Object from sessionStorage not reactive in vuejs / vuex

Является ответом!
IVO GELOV

16.06.2020 08:28:16

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

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

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

<div v-for="item in $store.state.cart" :key="item.id">
{{ item.name }}
</div>
Помочь в развитии проекта:
Закрыть X