在vue中form表单数据永久存储之后页面刷新无法展示的问题解决方式

本文链接：https://blog.csdn.net/m0_62823653/article/details/125176440

需求：填好form表单数据，永久存储之后刷新页面：数据无法在form表单展示。

解决方式

//页面结构部分省略
//form里面的数据为form表单数据
<script>
 export default {
   name:"app",
   data() {
     //因为data是一个函数，我可以在此操作利用Object.assing({},数据)；
     //这种方式给form表单里面的数据赋值，就可以赋值成功
     const a = localStorage.getItem('data')
     return Object.assign({
       form: {
         name: '',
         region: '',
         date1: '',
         date2: '',
         delivery: false,
         type: [],
         resource: '',
         desc: ''
       }
     },JSON.parse(a))
   },
   //每次只要我输入的数字发生了变化，updatad就会运行，进行永久存储data中的数据
   updated(){
     localStorage.setItem('data',JSON.stringify(this.$data))
   }
 }
</script>

疑问：为什么不能直接对data进行这样的操作赋值呢

data() {
    //此方法无法赋值成功：具体原因不明
   const a = localStorage.getItem('data')
   this.form=JSON.parse(a)
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
       }
     }
   },

//localStorage存储数据
updated(){
     localStorage.setItem('data',JSON.stringify(this.$data))
   }