关于前端:Vue-基于Vue的页面表单自动保存

需要

近期波及到的一个需要，在一个有很多表单的页面，须要定时对页面内局部表单的内容调用接口进行主动保留，不便用户在下次进入页面时进行反显。

思路

1. 定义一个标记需被主动保留的字段的数组;
2. 注册防抖办法;
3. 监听表单，在变更时调用防抖办法;
4. 在办法内依据标记辨别是否为关注字段与是否产生变更，并解决。

实现

<script>
import { debounce } from 'lodash'

// 主动保留指标字段
const AUTO_SAVE = ['username', 'phone', relationList]
export default {
    data() {
        return {
            // 表单
            formData: {
                id: '',
                username: '',
                phone: '',
                relationList: [],
            },
            // 已保留的表单
            savedFormData: {},
            // 节流查看办法
            debouncedFormDataCheck: () => {},
        }
    },
    watch: {
        formData: {
            handler() {
                // 监听表单，并在发生变化时调用查看办法
                this.debouncedFormDataCheck()
            },
            deep: true,
        }
    },
    mounted () {
        // 反显表单
        this.initFormData()
        // 节流暂存
        this.debouncedFormDataCheck = debounce(this.saveFormDataTemplate, 5000)
    },
    methods: {
        // 反显
        async initFormData() {
            let res = await getTempFormDataApi({ ... })
            if(res && res.data) {
                // 复位数据
                Object.assign(this.formData, res.data)
                Object.assign(this.savedFormData, res.data)
            } else {
                // 同步暂存对象
                this.savedFormData = {...this.formData}
            }
        },
        // 暂存
        async saveFormDataTemplate() {
            for(let item of AUTO_SAVE) {
                // 遍历指标字段
                if(this.formData[item] !== this.savedFormData[item]) {
                    // 指标字段已变更
                    let res = await saveTempFormDataApi({ ... })
                    // ...
                }
            }
        }
    }
}
</script>