Question

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

此代码来自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而项目的另一部分只是本地路径。请提前告诉你！

欢迎任何建议！

Answer 1

我一直在我的所有项目中使用vue-ls包进行本地存储访问，而且它非常易于使用。

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

Answer 2

使用当前实现的一行或两行代码实现起来并不容易。

我注意到你......

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

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

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

如何将localstorage添加到我的待办事项vue.js中？

2 个答案: