Счетчик «localStorage»

Проблема здесь в том, что всякий раз, когда страница загружается, и вы вызываете getItem(), вы сбрасываете localStorage.count = 0, поскольку он автоматически инициализируется до 0.

Вместо этого сделайте что-то вроде этого:

const app = Vue.createApp({
  data() {
    return {
      counter: localStorage.getItem('count') || 0,
    };
  },
  watch: {
    counter() {
      localStorage.setItem('count', this.counter);
    }

  },
  methods: {
    getItem() {
      return localStorage.getItem('count');
    },
  },
}).mount('#app');

Таким образом, вы устанавливаете начальное значение на значение из хранилища; и наблюдая за этим значением для изменения, а затем обновляя localStorage, чтобы отразить правильное значение, хранящееся в окне.

Это решение должно работать для вас:

Вот улучшенная версия:

В этом решении я использовал тернарный оператор, который сначала спрашивает, существует ли свойство счетчика в локальном хранилище, если нет, то счетчик будет инициализирован со значением 0, если счетчик есть, он получит значение и проанализирует это значение до значения int как все значения в локальном хранилище сохраняются как строки.

Итак, если вы суммируете значение, строка будет делать следующее:

шаг: 1

counter = '0';

шаг: 2

counter++

на этом шаге счетчик будет преобразован в целое число, но все равно будет равен 0;

Вместо этого, если вы сделаете то, что я кодирую

шаг: 1

counter = parseInt('0');

шаг: 2

counter++, счетчик в первый раз будет 1

Поскольку этот код предназначен для vuejs версии 3, фрагмент не будет работать.

const app = Vue.createApp({
  data() {
    return {
      counter: localStorage.getItem('count') ? parseInt(localStorage.getItem('count')) : 0,
    };
  },
  watch: {
    counter(newQuestion, oldQuestion){
      localStorage.setItem('count', newQuestion)
    }
  },
}).mount('#app');

<div id = "app">
   <h2>{{counter}}</h2>
   <button @click = "counter--">-</button>
   <button @click = "counter++">+</button>
</div>

Используйте вычисляемые свойства. Так что вам не нужны методы, наблюдатели или данные

const app = Vue.createApp({
  computed: {
     counter: {
        get() {
           return localStorage.getItem('count') || 0
        },
        set(val) {
           localStorage.setItem("count", val)
        }
     }
  },
}).mount('#app');