Почему localStorage работает только для 1-го или 2х элементов?

Question

[aLeXxX_03]

Необходимо, чтобы по клику на кнопку вызывалась функция addPlus или addMinus и она меняла значение объекта value на +1 или на -1, но итоговое значение value не может быть меньше 0.
Для этого я создал localStorage и обновляю значения в исходном массиве с помощью localStorage:

Код:

spoiler

import { defineStore } from "pinia";
import { ref, computed, watch } from "vue";

export const useStore = defineStore("Stores", () => {
  const Json = ref([
    {
      id: 1,
      value: 0,
      addPlus(id) {
        this.value = this.value + 1;
      },
      addMinus(id) {
        if (this.value > 0) {
          this.value = this.value - 1;
        }
      },
      image: "../img/juice_Ides.png",
      quantity: "В наличии 5 шт",
      name: "Хлеб Крестянский, 400г",
      price: "56",
      currency: "руб",
      basket: "В корзину",
      descr:
        "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
    },
    {
      id: 2,
      value: 0,
      addPlus(id) {
        this.value = this.value + 1;
      },
      addMinus(id) {
        if (this.value > 0) {
          this.value = this.value - 1;
        }
      },
      image: "../img/bread.png",
      quantity: "В наличии 3 шт",
      name: "Белый хлеб, 400г",
      price: "59",
      currency: "руб",
      basket: "В корзину",
      descr: "Белый хлеб",
    }
   
  ]);

  const Store = localStorage.getItem("Json");

  Json.value.map((item, index) =>
    JSON.parse(Store)._value[index].value !== Json.value[index].value
      ? (Json.value[index].value = JSON.parse(Store)._value[index].value)
      : (Json.value[index].value = JSON.parse(Store)._value[index].value)
  );

  watch(
    () => Json,
    (state) => {
      localStorage.setItem("Json", JSON.stringify(state));
    },
    { deep: true }
  );
  return {
    Json,
  };
});

Проблема в том, что если я в массив Json добавляю еще один аналогичный объект(можно даже просто скопировать такой же, сделав 3 объекта в массиве), то ничего не работает и браузер кричит, что

Cannot read properties of undefined (reading 'value')

Как исправить?

Comments

[aLeXxX_03]

Причину нашел, но как решить эту проблему так и НЕ понял.

В общем, когда первый раз запускается этот проход по массиву

Json.value.map((item, index) =>
    JSON.parse(Store)._value[index].value !== Json.value[index].value
      ? (Json.value[index].value = JSON.parse(Store)._value[index].value)
      : (Json.value[index].value = JSON.parse(Store)._value[index].value)
  );

, то в const Store, который содержит в себе localStorage - уже был запушен внутри watch json-объект, вот тут:

localStorage.setItem("Json", JSON.stringify(state));

А когда я добавляю новый объект в массив Json, то я так понимаю watch просто записал в Store localStorage значения при первом запуске и при включении этого блока(который ниже) идет ошибка:

Json.value.map((item, index) =>
    JSON.parse(Store)._value[index].value !== Json.value[index].value
      ? (Json.value[index].value = JSON.parse(Store)._value[index].value)
      : (Json.value[index].value = JSON.parse(Store)._value[index].value)
  );

Типа в Json.value у нас появился НОВЫЙ объект, а в localStorage его так и нет, потому при проходе внутри map возникает конфликт и получается ошибка.

[Aetae]

Чего ты добиться то хочешь?
Вот переписал по-нормальному твой код:

export const useStore = defineStore("Stores", () => {
  const Json = reactive([
    {
      id: 1,
      value: 0,
      addPlus(id) {
        this.value = this.value + 1;
      },
      addMinus(id) {
        if (this.value > 0) {
          this.value = this.value - 1;
        }
      },
      image: "../img/juice_Ides.png",
      quantity: "В наличии 5 шт",
      name: "Хлеб Крестянский, 400г",
      price: "56",
      currency: "руб",
      basket: "В корзину",
      descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
    },
    {
      id: 2,
      value: 0,
      addPlus(id) {
        this.value = this.value + 1;
      },
      addMinus(id) {
        if (this.value > 0) {
          this.value = this.value - 1;
        }
      },
      image: "../img/bread.png",
      quantity: "В наличии 3 шт",
      name: "Белый хлеб, 400г",
      price: "59",
      currency: "руб",
      basket: "В корзину",
      descr: "Белый хлеб",
    }

  ]);

  const Store = JSON.parse(localStorage.getItem("Json") ?? '{}');

  Json.forEach((item) => {
    if(Store[item.id] !== item.value) 
      item.value = Store[item.id];
  });

  watch(
    Json,
    (state) => localStorage.setItem("Json", JSON.stringify(
      // сохраняем мы объетк вида {id: value}, потому что индексы в массиве нифига не надёжны
      state.reduce((acc, item) => { 
        acc[item.id] = item.value;
        return acc;
      }, {})
    )),
    { deep: true }
  );
  return {
    Json,
  };
});

Только если в твой Json массив внезапно добавят значений в процессе работы, то в localStorage запишутся только значения value. При перезагрузке естественно в массиве будет только то, что ты туда положил. Мб надо сохранять весь массив а не только value?.. Хз.

[aLeXxX_03]

Aetae, Проблема в том, что после очистки истории браузера или после добавления в реактивную переменную в которой массив объектов ЕЩЕ один объект, то все ломается.

[aLeXxX_03]

Aetae, я создаю обычный каталог товаров с возможность выбрать n-е количество товара

[Aetae]

aLeXxX_03, мой код не сломается.:)

[aLeXxX_03]

Aetae, Да, если всего 2 объекта в массиве, то не ломается, а если куча объектов разных(но однотипных), то начинается хрень...

[aLeXxX_03]

Aetae, вот с этими объектами в массиве как-то все криво работает:

spoiler

<code lang="javascript">
{
    id: 1,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/juice_Ides.png",
    quantity: "В наличии 5 шт",
    name: "Хлеб Крестянский, 400г",
    price: "56",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
  },
  {
    id: 2,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread.png",
    quantity: "В наличии 3 шт",
    name: "Белый хлеб, 400г",
    price: "59",
    currency: "руб",
    basket: "В корзину",
    descr: "Белый хлеб",
  },
  {
    id: 3,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread_belgor.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Белгородский, 400г",
    price: "49",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода питьевая, мука ржаная хлебопекарная обдирная, патока, соль, дрожжи хлебопекарные прессованные, улучшитель «Denfai» (мука пшеничная хлебопекарная высшего сорта, крахмал кукурузный, эмульгатор Е471, ферментные препараты).",
  },
  {
    id: 4,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/long__loaf.png",
    quantity: "В наличии 4 шт",
    name: "Батон, 400г",
    price: "119",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Батон приготовлен из пшеничной муки высшего сорта, дрожжей и подсолнечного масла. Классический батон в удобной нарезке. При изготовлении батона производитель не использует ни ускорители, ни хлебопекарные смеси.",
  },
  {
    id: 1,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/juice_Ides.png",
    quantity: "В наличии 5 шт",
    name: "Хлеб Крестянский, 400г",
    price: "56",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
  },
  {
    id: 6,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread__bordin.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Бородинский, 400г",
    price: "79",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Ароматный, вкуснейший и очень домашний! Для всей семьи. Классический бородинский хлеб в духовке можно выпекать в форме или без нее. В обоих случаях он получается потрясающий. Испеките такой хлеб и поймете, что ничего лучше вы еще не пробовали!",
  },
  {
    id: 1,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/juice_Ides.png",
    quantity: "В наличии 5 шт",
    name: "Хлеб Крестянский, 400г",
    price: "56",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
  },
  {
    id: 6,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread__bordin.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Бородинский, 400г",
    price: "79",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Ароматный, вкуснейший и очень домашний! Для всей семьи. Классический бородинский хлеб в духовке можно выпекать в форме или без нее. В обоих случаях он получается потрясающий. Испеките такой хлеб и поймете, что ничего лучше вы еще не пробовали!",
  },
  {
    id: 1,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/juice_Ides.png",
    quantity: "В наличии 5 шт",
    name: "Хлеб Крестянский, 400г",
    price: "56",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
  },
  {
    id: 2,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread.png",
    quantity: "В наличии 3 шт",
    name: "Белый хлеб, 400г",
    price: "59",
    currency: "руб",
    basket: "В корзину",
    descr: "Белый хлеб",
  },
  {
    id: 3,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread_belgor.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Белгородский, 400г",
    price: "49",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода питьевая, мука ржаная хлебопекарная обдирная, патока, соль, дрожжи хлебопекарные прессованные, улучшитель «Denfai» (мука пшеничная хлебопекарная высшего сорта, крахмал кукурузный, эмульгатор Е471, ферментные препараты).",
  },
  {
    id: 4,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/long__loaf.png",
    quantity: "В наличии 5 шт",
    name: "Батон, 400г",
    price: "119",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Батон приготовлен из пшеничной муки высшего сорта, дрожжей и подсолнечного масла. Классический батон в удобной нарезке. При изготовлении батона производитель не использует ни ускорители, ни хлебопекарные смеси.",
  },
  {
    id: 4,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/long__loaf.png",
    quantity: "В наличии 5 шт",
    name: "Батон, 400г",
    price: "119",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Батон приготовлен из пшеничной муки высшего сорта, дрожжей и подсолнечного масла. Классический батон в удобной нарезке. При изготовлении батона производитель не использует ни ускорители, ни хлебопекарные смеси.",
  },
  {
    id: 1,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/juice_Ides.png",
    quantity: "В наличии 5 шт",
    name: "Хлеб Крестянский, 400г",
    price: "56",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
  },
  {
    id: 6,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread__bordin.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Бородинский, 400г",
    price: "79",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Ароматный, вкуснейший и очень домашний! Для всей семьи. Классический бородинский хлеб в духовке можно выпекать в форме или без нее. В обоих случаях он получается потрясающий. Испеките такой хлеб и поймете, что ничего лучше вы еще не пробовали!",
  },
  {
    id: 3,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread.png",
    quantity: "В наличии 3 шт",
    name: "Белый хлеб, 400г",
    price: "59",
    currency: "руб",
    basket: "В корзину",
    descr: "Белый хлеб",
  },
  {
    id: 3,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread_belgor.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Белгородский, 400г",
    price: "49",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода питьевая, мука ржаная хлебопекарная обдирная, патока, соль, дрожжи хлебопекарные прессованные, улучшитель «Denfai» (мука пшеничная хлебопекарная высшего сорта, крахмал кукурузный, эмульгатор Е471, ферментные препараты).",
  },
</code>

[aLeXxX_03]

aLeXxX_03, то есть какой-то товар реагирует на нажатие кнопки вызывающей функцию addPlus, а какой-то не реагирует

[aLeXxX_03]

И вообще правильно ли я делаю, что в отдельном файле храню такой большой массив данных?
Может из-за этого и проблемы, т.к. этот каталог товаров нужно хранить на отдельном бэкенд-сервере доставая оттуда и изменяя там данные?

[Aetae]

aLeXxX_03, "хрень" очень полезное(нет) для дебага определение.
Могу разве что предположить, что id у тебя внезапно оказались не уникальными.

Ну или что ты нихена не продумал логику и архитектуру что-то творишь наугад.

...upd:
Да, пока я отвечал ты добавил код и id там не уникальны, естественно всё развалилось.

[aLeXxX_03]

И еще после очистки истории браузера ЛЮБОЙ товар(т.е. value в объекте) прекращает реагировать на addPlus

[aLeXxX_03]

Aetae, да-да, id не уникальные, повторяются. Тогда все понял, извините)

[Aetae]

addPlus вообще нечего делать там, на самом то деле.

[aLeXxX_03]

Aetae, а как можно иначе изменять значение value?
У меня вообще впечатление, что я изначально эту задачу неправильно решаю и она решается куда проще и логичнее, чем нагромождать каждый объект собственным addPlus/addMinus

[aLeXxX_03]

Aetae, и самое главное - правильно ли я понимаю, что подобные задачи на реальных проектах решаются иначе и бэкенд достается через axios(например) с удаленного сервера?
Тогда не возник бы ряд тех проблем, который возник у меня

Answer 1

[aLeXxX_03]

Причину нашел, но как решить эту проблему так и НЕ понял.

В общем, когда первый раз запускается этот проход по массиву

Json.value.map((item, index) =>
    JSON.parse(Store)._value[index].value !== Json.value[index].value
      ? (Json.value[index].value = JSON.parse(Store)._value[index].value)
      : (Json.value[index].value = JSON.parse(Store)._value[index].value)
  );

, то в const Store, который содержит в себе localStorage - уже был запушен внутри watch json-объект, вот тут:

localStorage.setItem("Json", JSON.stringify(state));

А когда я добавляю новый объект в массив Json, то я так понимаю watch просто записал в Store localStorage значения при первом запуске и при включении этого блока(который ниже) идет ошибка:

Json.value.map((item, index) =>
    JSON.parse(Store)._value[index].value !== Json.value[index].value
      ? (Json.value[index].value = JSON.parse(Store)._value[index].value)
      : (Json.value[index].value = JSON.parse(Store)._value[index].value)
  );

Типа в Json.value у нас появился НОВЫЙ объект, а в localStorage его так и нет, потому при проходе внутри map возникает конфликт и получается ошибка.