借助Vue+PouchDB打造专属的本地化待办事项列表

前端

2023-12-13 08:56:41

导言

在当今快节奏的世界中，保持井井有条并高效管理任务至关重要。待办事项列表是实现这一目标的有效工具，但许多流行的待办事项列表应用程序都依赖于云存储。这可能会带来隐私问题，并且在没有互联网连接的情况下无法访问您的数据。

为了解决这些问题，您可以使用Vue和PouchDB构建一个本地化的待办事项列表应用程序。Vue是一个流行的JavaScript框架，非常适合构建用户界面，而PouchDB是一个JavaScript数据库，可以在本地存储数据。

先决条件

在开始之前，您需要确保满足以下先决条件：

Node.js和npm
Vue CLI
PouchDB

如果您尚未安装这些软件包，请按照以下说明进行安装：

创建Vue项目

首先，创建一个新的Vue项目：

vue create easy-todo-list

这将创建一个名为“easy-todo-list”的新项目。

安装PouchDB

接下来，安装PouchDB：

npm install pouchdb

创建数据库

现在，您需要创建一个数据库来存储待办事项。为此，请在“src”目录中创建一个名为“db.js”的新文件。在此文件中，添加以下代码：

import PouchDB from 'pouchdb';

const db = new PouchDB('easy-todo-list');

export default db;

这将创建一个名为“easy-todo-list”的新数据库。

创建用户界面

现在，您需要创建一个用户界面来与数据库交互。为此，请在“src”目录中创建一个名为“App.vue”的新文件。在此文件中，添加以下代码：

<template>
  <div id="app">
    <h1>Easy Todo List</h1>
    <input type="text" placeholder="Add a new task" v-model="newTask">
    <button @click="addTask">Add</button>
    <ul>
      <li v-for="task in tasks" @click="toggleTask(task)">{{ task.text }}</li>
    </ul>
  </div>
</template>

<script>
import db from './db';

export default {
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  mounted() {
    db.allDocs({ include_docs: true }).then(res => {
      this.tasks = res.rows.map(row => row.doc);
    });
  },
  methods: {
    addTask() {
      if (this.newTask) {
        db.put({ _id: Date.now(), text: this.newTask, completed: false }).then(() => {
          this.tasks.unshift({ _id: Date.now(), text: this.newTask, completed: false });
          this.newTask = '';
        });
      }
    },
    toggleTask(task) {
      task.completed = !task.completed;
      db.put(task).then(() => {
        this.tasks = this.tasks.map(t => t._id === task._id ? task : t);
      });
    }
  }
};
</script>