Как сохранять данные и после перезагрузки страницы на VUE 3 ?

Question

Как сохранять данные и после перезагрузки страницы на VUE 3 ?

Константин Дубовцев Ученик (1), на голосовании 1 год назад

Можно ли с помощью Pinia или VUEX сделать так, чтобы данные сохранялись после обновления страницы?
Т.е. у меня есть кнопка выбора товара и когда я нажимаю "+" на ней, то вызывается функция увеличивающая значение счетчика на 1.
Когда кликаю на "-", то уменьшаю значение счетчика на 1(минимальное значение - "0").

Но после перезагрузки страницы эти значения теряются, т.к. очищается переменная(значение по умолчанию "0").
Как сделать так, чтобы переменная(счетчик) не очищался после обновления страницы?

Answer 1

Dlazder Мудрец (16875) 1 год назад

LocalStorage

Константин ДубовцевУченик (1) 1 год назад

Я объясню задачу получше.
У меня есть массив с данными, в котором 30 объектов(каждый объект - это список свойств с описанием КОНКРЕТНОГО товара, за который отвечает сам объект).
В каждом объекте есть значение value: 0 и так же вот такие 2 функции:

Функция 1:
addPlus(id) {
this.value = this.value + 1;
},
Функция 2:
addMinus(id) {
if (this.value > 0) {
this.value = this.value - 1;
}
},
Таким образом я вызываю для выбранного товара одну из этих функций и увеличиваю счетчик или уменьшаю счетчик выбранных товаров.

Но значение value в массиве после перезагрузки страницы обнуляется.
Может ли LocalStorage помочь мне решить эту проблему?

Просто я не пойму, как его использовать для реализации моей задачи.

Константин ДубовцевУченик (1) 1 год назад

то есть, если я 5 раз нажал на addPlus, то у меня должно значение value равняться 5. И сохранятся после перезагрузки страницы.
Но как тут можно втиснуть LocalStorage я вообще ума ни прилажу, может я чего-то не знаю или не понимаю...

Константин ДубовцевУченик (1) 1 год назад

сохраняться*))

Константин ДубовцевУченик (1) 1 год назад

в каждом объекте два метода, а не функции(хотя это одно и тоже, но все-таки)

Dlazder Мудрец (16875) Константин Дубовцев, localStorage сохраняет значение в формате строки в хранилище, при повторной загрузке данные можно оттуда достать. Если нужно сохранить объект, массив просто используем JSON