当前位置：首页 > VUE

vue实现保存草稿

2026-01-17 17:40:15VUE

Vue 实现保存草稿功能

在 Vue 中实现保存草稿功能通常需要结合本地存储（如 localStorage 或 sessionStorage）或后端 API。以下是几种常见实现方式：

使用 localStorage 保存草稿

localStorage 适合临时存储用户输入的草稿内容，即使页面刷新也不会丢失数据。

// 在组件中
data() {
  return {
    draftContent: ''
  }
},
created() {
  // 加载草稿
  const savedDraft = localStorage.getItem('myDraft')
  if (savedDraft) {
    this.draftContent = savedDraft
  }
},
methods: {
  saveDraft() {
    localStorage.setItem('myDraft', this.draftContent)
  },
  clearDraft() {
    localStorage.removeItem('myDraft')
    this.draftContent = ''
  }
}

模板部分：

<textarea v-model="draftContent"></textarea>
<button @click="saveDraft">保存草稿</button>
<button @click="clearDraft">清除草稿</button>

使用 Vuex 持久化插件

对于大型应用，可以结合 Vuex 和持久化插件实现草稿功能：

安装 vuex-persistedstate：
```
npm install vuex-persistedstate
```

配置 store：


import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({ state: { drafts: {} }, mutations: { saveDraft(state, {id, content}) { state.drafts[id] = content }, clearDraft(state, id) { delete state.drafts[id] } }, plugins: [createPersistedState()] })


3. 组件中使用：
```javascript
methods: {
  saveDraft() {
    this.$store.commit('saveDraft', {
      id: 'currentPost',
      content: this.draftContent
    })
  }
}

自动保存草稿

实现定时自动保存功能：

data() {
  return {
    draftContent: '',
    autoSaveInterval: null
  }
},
mounted() {
  this.autoSaveInterval = setInterval(() => {
    if (this.draftContent) {
      this.saveDraft()
    }
  }, 30000) // 每30秒自动保存
},
beforeDestroy() {
  clearInterval(this.autoSaveInterval)
}

结合后端 API

对于需要长期保存的草稿，应该调用后端 API：

methods: {
  async saveDraft() {
    try {
      await axios.post('/api/drafts', {
        content: this.draftContent
      })
      // 提示保存成功
    } catch (error) {
      // 处理错误
    }
  },
  async loadDraft() {
    const response = await axios.get('/api/drafts')
    this.draftContent = response.data.content
  }
}

草稿恢复提示

当检测到有未提交的草稿时，可以提示用户：

created() {
  const savedDraft = localStorage.getItem('myDraft')
  if (savedDraft && confirm('检测到未提交的草稿，是否恢复？')) {
    this.draftContent = savedDraft
  }
}