如何将本地存储添加到我的待办事项 vue.js？答案

【问题标题】：How do I add localstorage to my to-do vue.js?如何将本地存储添加到我的待办事项 vue.js？
【发布时间】：2018-10-06 00:03:32
【问题描述】：

我正在尝试制作一个待办事项应用程序，但我不知道如何使用 Vue 制作本地存储。我的 App.vue 看起来像这样：

App.vue code photo1

App.vue code photo2

这里的代码来自 TodoList.vue，用于删除和完成任务。我还有两个组件用于编辑任务和发布新任务。也许 localstorage 方法应该在 CreatingTodo.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>

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

欢迎任何建议！

【问题讨论】：

Vue.JS - how to use localstorage with Vue.JS的可能重复
在发布新问题之前请先搜索 :) 另外，请在每个帖子中提出一个问题。提示：您的第二个问题可能已经在另一篇文章中得到解答。
@Boaz，非常感谢。我会牢记在心，以备不时之需。我道歉:)

标签： javascript html vue.js vuejs2

【解决方案1】：

我在所有项目中都使用vue-ls 包进行本地存储访问，它真的很容易使用。

另一方面，您可以直接使用native JavaScript APIs for LocalStorage 访问本地存储。

【讨论】：

【解决方案2】：

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

我注意到你...

不唱 vuex
将列表作为道具传递
修改（变异）道具

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

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

【讨论】：

非常感谢您花时间和解释！