vue 表单暂存

利用watch监听数据变化

在一些表单项目中，需要用到表单的暂存，我们可以在watch中监听form表单的变化，然后利用存在local或者session作为临时的表单保存

本文主要是用loacl作为储存方式

监听 addForm为表单数据

 watch: {
    form: {
      handler(res) {
        if (res) {
          var tempData = [];
          tempData.push(this.form); //值变化时保存在tempData
          localStorage.setItem("merchantsFrom", JSON.stringify(tempData)); //本地存储存储的是字符串
        }
      },
      deep: true,//***
    },
  },

页面渲染时mounted 调用方法

mounted() {
    this.formDataInit();
  },

methods:{
    formDataInit() {
      if (localStorage.getItem("merchantsFrom")) {
        //对象不为null时，加载数据
        var arr = [];
        arr = JSON.parse(localStorage.getItem("merchantsFrom"));
        console.log("初始化数据--", arr[0]);
        this.form = arr[0];
      }
    },
}

在保存成功后 清除localStorage中的数据

localStorage.removeItem('merchantsFrom')