Как добавить localstorage в мой список дел vue.js?

Question

Я пытаюсь создать приложение для ведения дел, но я не знаю, как мне создать локальное хранилище с помощью Vue. Мой App.vue выглядит так:

App.vue код фото1

App.vue код фото2

Этот код взят из TodoList.vue для удаления и завершения задачи. И у меня есть еще два компонента, которые предназначены для редактирования задачи и публикации новой задачи. Может быть, метод localstorage должен быть в CreateTodo.vue? Я установил npm install vue-localstorage --save , но теперь я не знаю, где и как продолжить работу с хранилищем.

 <template>
  <div>
    <p class="tasks">Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
    <p class="tasks">Pending Tasks: {{todos.filter(todo => {return todo.done === false}).length}}</p>
    <todo v-on:delete-todo="deleteTodo" v-on:complete-todo="completeTodo" v-for="todo in todos" :todo.sync="todo"></todo>
  </div>
</template>

<script type = "text/javascript" >
import sweetalert from 'sweetalert';
import Todo from './Todo';

export default {
  props: ['todos'],
  components: {
    Todo,
  },
  methods: {
    deleteTodo(todo) {
      sweetalert({
        title: 'Are you sure?',
        text: 'This To-Do will be permanently deleted!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, delete it!',
        closeOnConfirm: false,
      },
      () => {
        const todoIndex = this.todos.indexOf(todo);
        this.todos.splice(todoIndex, 1);
        sweetalert('Deleted!', 'Your To-Do has been deleted.', 'success');
      });
    },
    completeTodo(todo) {
      const todoIndex = this.todos.indexOf(todo);
      this.todos[todoIndex].done = true;
      sweetalert('Success!', 'To-Do completed!', 'success');
    },
  },
};
</script>

<style scoped>
p.tasks {
  text-align: center;
}
</style>

Мой второй вопрос также касается Вью. Потому что до сих пор я писал свой университетский проект на HTML, CSS и JavaScript. Как я могу соединить оба проекта, это todo - localhost: 8080, а другая часть проекта - просто локальный путь. Заранее спасибо!

Любой совет приветствуется!

Answer 1

Это не так просто реализовать с помощью одной или двух строк кода в вашей текущей реализации.

Я заметил, что ты ...

• не петь vuex
• проходной список как опора
• модифицирует (мутирует) опору

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

Проблема с передачей реквизита заключается в том, что если данные изменяются в родительском элементе, это изменение передается дочернему элементу, что фактически уничтожает вашу измененную версию. Для этого потребуется, чтобы компонент, владеющий данными, внес изменения и передал их дочерним элементам, что означает, что каждое изменение должно $emit вызывать, который затем должен обрабатываться владельцем данных. Затем владелец данных должен будет выполнить загрузку данных из локального хранилища во время или до монтирования и обновлять после каждого изменения. Как вы можете видеть, это потребует значительных изменений в вашей структуре, поэтому часто предпочитают vuex.

Answer 2

Я использовал пакет vue-ls во всех своих проектах для доступа к локальному хранилищу, и он действительно прост в использовании.

С другой стороны, вы можете просто получить доступ к локальному хранилищу напрямую с помощью собственных API-интерфейсов JavaScript для LocalStorage .