如何使用 Vue.js 保存待办事项

【问题标题】：How can I save todo tasks using Vue.js如何使用 Vue.js 保存待办事项
【发布时间】：2021-01-26 06:48:02
【问题描述】：

我正在制作一个新的 ToDo 列表，我想使用 Vue.js 将任务/项目保存在 localStorage 上

我已经使用 JS 制作了待办事项列表，并尝试将 innerHTML/TextContent 保存到 localStorage，如下所示：

localStorage.setItem('tasks', tasks.innerHTML);

预览： https://codepen.io/Eslare/pen/QWKXzvd

【问题讨论】：

标签： javascript vue.js local-storage

【解决方案1】：

您可以使用状态管理来最好地保存您的值并管理它们在本地存储中的保存方式。

在vue中，最受欢迎的是vuex。你可以看到它的文档here。

您还可以了解稍后如何连接 vuex 和本地存储 here。

【讨论】：

【解决方案2】：

您为什么不使用JSON.stringify 将对象本身推送到本地存储：

 addTask: function() {
      this.todos.push({
        id: this.todos.length + 1,
        name: this.newTask,
        completed: false
      });

      localStorage.setItem('tasks', JSON.stringify(this.todos));

      this.newTask = '';
    }

然后，您可以在使用 JSON.parse 重新加载页面后，在挂载的函数中重新加载任务：

mounted(){
  this.todos = JSON.parse(localStoarge.getItem('tasks'));
}

【讨论】：