Как сохранить состояние логики валидации после перезагрузки страницы в Vue.js?

Как можно обновить функцию `getValidatePanels` и связанные массивы данных после перезагрузки страницы, так чтобы она корректно работала с данными из локального хранилища?
  • 19 апреля 2024 г. 10:30
Ответы на вопрос 2
Для сохранения состояния логики валидации после перезагрузки страницы в Vue.js можно использовать локальное хранилище (localStorage или sessionStorage). 

Ниже приведен пример реализации этого подхода:

```javascript
export default {
  data() {
    return {
      panels: JSON.parse(localStorage.getItem('panels')) || [],
      selectedPanels: JSON.parse(localStorage.getItem('selectedPanels')) || []
    };
  },
  methods: {
    getValidatePanels() {
      // Логика валидации
    }
  },
  mounted() {
    this.getValidatePanels();
  },
  watch: {
    panels: {
      handler() {
        localStorage.setItem('panels', JSON.stringify(this.panels));
        this.getValidatePanels();
      },
      deep: true
    },
    selectedPanels: {
      handler() {
        localStorage.setItem('selectedPanels', JSON.stringify(this.selectedPanels));
        this.getValidatePanels();
      },
      deep: true
    }
  }
};
```

В данном примере, при загрузке компонента, данные из локального хранилища загружаются в массивы `panels` и `selectedPanels`. При изменении этих массивов, их содержимое обновляется в локальном хранилище. Также вызывается метод `getValidatePanels`, который обновляет состояние логики валидации.

Чтобы обновить функцию `getValidatePanels` и связанные массивы данных после перезагрузки страницы, нужно использовать данные из локального хранилища вместо жестко закодированных значений. Таким образом, при повторной загрузке страницы данные будут загружены из локального хранилища и функция `getValidatePanels` будет корректно работать с этими данными.
Задача решена, переделал логику компонентов. Сделал дочерний компонент dummy для рендера данных (убрал лишний код), а родителю предоставил логику работы с локальным хранилищем: 
const personalDetailsData = ref([]);
onMounted(async () => {
  const localPersonalDetailsData = JSON.parse(localStorage.getItem('personalDetailsEducationPanels')) || [];
  if (localPersonalDetailsData.length) {
    personalDetailsPanelArr.value = localPersonalDetailsData;
  }
});
watch(personalDetailsPanelArr, (newValue) => {
  personalDetailsData.value = newValue;
  localStorage.setItem('personalDetailsEducationPanels', JSON.stringify(newValue));
}, {
  deep: true
});
Похожие вопросы