在Vue中编辑草稿简单几步搞定_和内容_首先创建一个名为DraftEditor的新组件

作者：网络发烧程序猿 | 发布时间：2025-07-09 |

你需要一个草稿模型来存储用户输入的数据。在Vue中，这个模型通常是一个JavaScript对象。在组件的方法里，你可以这样初始化它：

data() { return { draft: { title: '', content: '' } }; }

这个草稿模型有两个属性：标题和内容。

为了让草稿状态能够保存下来，我们可以利用Vue的属性监控功能，每当草稿模型变化时，就自动保存到本地存储（LocalStorage）：

watch: { draft: { handler(newVal) { localStorage.setItem('draft', JSON.stringify(newVal)); }, deep: true } }

这样，只要草稿模型一有变动，新的数据就会自动保存到本地。

当用户再次打开页面时，你想恢复之前的草稿状态，可以在组件的生命周期钩子中这样做：

created() { const savedDraft = JSON.parse(localStorage.getItem('draft')); if (savedDraft) { this.draft = savedDraft; } }

这样，组件创建时会从本地存储中读取草稿数据，并恢复到草稿模型中。

如果用户想要删除草稿数据，可以提供一个按钮，点击后删除本地存储中的草稿数据，并清空草稿模型：

methods: { clearDraft() { localStorage.removeItem('draft'); this.draft = { title: '', content: '' }; } }

用户点击按钮后，草稿数据就会被删除，草稿模型也会被清空。

在Vue中编辑草稿主要分为四个步骤：创建草稿模型、保存草稿状态、恢复草稿状态和删除草稿。通过使用本地存储和Vue的属性，我们可以轻松实现草稿数据的自动保存和恢复，提升用户体验。