Javascript 如何将本地存储添加到待办vue.js？

我正在尝试制作一个待办应用程序，但我不知道如何使用Vue制作本地存储。 我的App.vue如下所示：

这里的代码来自TodoList.vue，用于删除和完成任务。我还有两个组件，用于编辑任务和发布新任务。也许本地存储方法应该在CreatingTodo.vue中？我安装了npm install vue localstorage--保存，但从现在起我不知道在哪里以及如何继续使用存储

 <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>

已完成的任务：{{todos.filter（todo=>{return todo.done==true}）.length}
挂起的任务：{{todos.filter（todo=>{return todo.done==false}）.length}

从“sweetalert”导入sweetalert；
从“/Todo”导入Todo；
导出默认值{
道具：[待办事项]，
组成部分：{
待办事项，
},
方法：{
删除todo（todo）{
甜心({
标题：“你确定吗？”，
文本：“此待办事项将被永久删除！”，
键入：“警告”，
showCancelButton:true，
confirmButtonColor:“#DD6B55”，
confirmButtonText:'是，删除它！'，
CloseOnConfig:false，
},
() => {
const todoIndex=this.todos.indexOf（todo）；
这个.todos.splice（todoIndex，1）；
sweetalert（“已删除！”，“您的待办事项已删除。”，“成功”）；
});
},
全地形图（todo）{
const todoIndex=this.todos.indexOf（todo）；
this.todos[todoIndex].done=true；
sweetalert（'Success！'，'To Do completed！'，'Success'）；
},
},
};
p、 任务{
文本对齐：居中；
}

我的第二个问题也是关于Vue的。因为直到现在我还在写关于HTML、CSS和JavaScript的大学项目。如何连接两个项目此todo为localhost:8080，项目的另一部分仅为本地路径。提前感谢

欢迎任何意见

我在所有的项目中都使用了这个包来访问本地存储，它非常容易使用

---

另一方面，您可以直接使用访问本地存储。

在当前的实现中，使用一行或两行代码实现这一点并不容易

我注意到你

• 不唱vuex
• 通过名单作为道具
• 修改（变异）道具

使用vuex将数据移动到一个单独的全局存储中，在这里可以访问数据并从任何组件进行更改，而无需从父级传递数据。开始使用vuex时会有一段学习曲线，但您可能会发现它很有帮助。它还允许在通过几行代码或使用库进行任何变异后轻松添加本地存储实现

---

传递道具的问题是，如果父级中的数据发生更改，则更改会推送到子级，从而有效地破坏修改后的版本。这将要求拥有数据的组件进行更改并将其传递给子级，这意味着每个更改都应该发出一个调用，然后由数据所有者处理。然后，数据所有者将让tom实现在装载时或装载之前从localstorage加载数据，并在每次更改后进行更新。正如您所见，这将需要对您的结构进行一些广泛的更改，这就是为什么vuex通常是首选的原因。

在发布新问题之前请搜索的可能重复：）此外，请在每篇文章中提出一个问题。提示：您的第二个问题可能已经在另一篇帖子中得到了回答。@Boaz，非常感谢。将来我会记住这一点。我很抱歉：）非常感谢您花费的时间和解释！