По какому событию можно вызвать этот код, чтобы данные из localStorage отображались корректно?

Question

[nastya_zholudeva]

У меня есть компонент seenGoods, который выводит список просмотренных товаров. Он отображается практически на всех страницах. Данные для него я получаю из localStorage (по клику на товар, данные об этом товаре сохраняются в массив объектов таких же данных) и потом их с помощью vue отображаю в верске.

created() {
            this.$nextTick(function () {
var list = JSON.parse(localStorage.getItem('seenGoods'));

                if (list === null) {
                    list = [];
                } else {
                    list
                }
                this.goods = list;
            })
        }

Проблема в том, что если очистить localStorage, а потом "потыкать" на разные товары, то в localStorage все отображается как надо, но в верстке их нет (пустой массив). Пробовала этот код использовать в updated(), но кроме постоянно грузящейся страницы ничего не получила.

По какому событию можно вызвать этот код, чтобы данные отображались корректно

Answer 1

[Nikita Velko]

Если у вас этот компонент отображается практически на всех страницах, то лучше храните список просмотренных товаров в Vuex.
И получается у вас будет примерно такая схема:

1. Пользователь зашел на сайт (не важно, впервые или нет), получаете просмотренные товары из localStorage и результат записываете в state;
   
2. При клике добавляете товар в state и обновляете его в localStorage.
   

В сам компонент данные вы передаете именно из стэйта, а не из localStorage, именно это и гарантирует вам реактивность данных.
И проверку localStorage вы будете делать всего один раз при загрузке, допустим, корневого компонента.

Comments

[nastya_zholudeva]

Nikita Velko, спасибо. Подскажите я правильно выполняю проверку localStorage

var list = JSON.parse(localStorage.getItem('seenGoods'));

                if (list === null) {
                    list = [];
                } else {
                    list
                }
                this.$store.dispatch('seenGoods/fetchSeenGoods')

[Nikita Velko]

Не совсем, вы же когда диспатчите экшн, должны параметром передать ему сам массив товаров. Иначе откуда мутация получит данные для записи?
Получите примерно так:

const list = JSON.parse(localStorage.getItem('seenGoods')) || [];

this.$store.dispatch('seenGoods/fetchSeenGoods', list);

[nastya_zholudeva]

Nikita Velko, извините, что опять беспокою, но с vuex работала очень мало и может быть что-то не то делаю. Но у меня ничего не поменялось: очистила localStorage и "понажимала" опять на товары, localStorage заполнился, в версте пусто((. Вот мой скрипт компонента

export default {
        computed: {
            seenGoods () { return this.$store.state.seenGoods.seenGoods },
        },
        created() {
            this.$nextTick(function () {
              
                const list = JSON.parse(localStorage.getItem('seenGoods')) || [];

                this.$store.dispatch('seenGoods/fetchSeenGoods', list);

            })
        }
    }

и сам vuex файл seenGoods.js

import Axios from 'axios'


export const state = () => ({
    seenGoods: [],
})


export const actions = {
    fetchSeenGoods (state) {
            state.commit('setSeenGoods', JSON.parse(localStorage.getItem('seenGoods')))
    },
}

export const mutations = {
    setSeenGoods: (state, data) => {
    state.seenGoods = Object.assign({}, data)
},
}
//

скорее всего это из-за того, что я проверку вызываю в created(). Где мне ее можно вызвать?

[Nikita Velko]

Так а вы при нажатии на товар добавляете вообще его в стэйт?

Плюс, если вы решили проверять localStorage сразу в экшене, то оставьте в created() только это:
this.$store.dispatch('seenGoods/fetchSeenGoods');

[nastya_zholudeva]

Nikita Velko, да, по нажатию на товар, его данные отправляются в localStorage.

А где тогда можно сделать проверку на "наполняемость" localStorage?

[Nikita Velko]

Так вы не в localStorage должны добавлять его, а в стэйт.

[nastya_zholudeva]

Nikita Velko, а как мне данные из другого компонента, поместить в стэйт?

[Nikita Velko]

Точно также диспатчите экшн из компонента с передаваемыми данными и с помощью мутации записываете их в стору (обновляете стэйт).
Прочитайте документацию: https://vuex.vuejs.org/ru/
Потому что так можно несколько дней наугад тыкать и пытаться заставить работать скрипт, а можно сначала разобраться, как должно это работать все.