Блог

Главная - Вопросы по программированию - Как использовать локальное хранилище и асинхронный API в Vue 2?

Как использовать локальное хранилище и асинхронный API в Vue 2?

#api #vue.js #web #local-storage

Вопрос:

Я пытаюсь составить список дел, в котором список заполняется задачами из асинхронного запроса. У меня есть задачи, сохраненные в локальном хранилище. Однако, когда я добавляю mount() функцию в функцию монтирования локального хранилища, API не запрашивается. Когда я помещаю их обоих в одну и ту же mount() функцию, часть локального хранилища не работает. Что я делаю не так?

 var app = new Vue({
  el: '#app',
  data () {
    return {
      items: [{
        title: "",
        completed: false,
      }],
      title: '',
      show: 'all',
    }
  },
  mounted () {
    axios
    .get("https://jsonplaceholder.typicode.com/todos")
    .then(response => this.items = response.data)
  },
  mounted () {
    if(localStorage.item) this.item = localStorage.item;
  },

Комментарии:

1. Вероятно, вам следует подумать о слиянии массивов: это связано с тем, что вы пишете this.item как из API, так и из localStorage. Обычно это приводит к перезаписи данных API из localStorage, поскольку первый по своей природе является асинхронным. Однако логика дедупликации записей внутри полностью зависит от вас.

2. @Терри Спасибо за ответ! Знаете ли вы какие-либо ресурсы о том, как объединять массивы, или у вас есть какие-либо идеи, как бы я это сделал?

Ответ №1:

Вы не можете установить 2 mounted() ключа — только один

Метки: