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>