vue深度监听对象的变化，并使用localStorage进行对象存储

最新推荐文章于 2024-07-01 00:20:20 发布

酷jjs

最新推荐文章于 2024-07-01 00:20:20 发布

阅读量1.1k

点赞数 1

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_32584661/article/details/105411203

版权

VUE 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<script>
  export default {
    data() {
      return {


        editableTabs: [{
          title: '查询',
          name: '1',
          content:{
             //右侧内容输入区
             searchtext:'',
             //动态表头
             tableHeader:[
               /* "年后","11","name" */
             ],
             //动态表单列表
             tableList:[
               /* {"年后":"222222","11":"222222","name":"222222"}, */
             ],
          },
        }, {
          title: '查询',
          name: '2',
          content:{
             searchtext:'',
             tableHeader:[],
             tableList:[],
          },
        }],


      }
    },
    mounted() {

      /* 获取editableTabs缓存 */
      let editableTabs=JSON.parse(localStorage.getItem('editableTabs'));
      if(editableTabs){
        this.editableTabs=editableTabs;
      }

    },

    watch:{

      /* 实时 深度监听editableTabs值得变化 */
      editableTabs:{
         handler(val){
             /* 存储*/
             localStorage.setItem('editableTabs', JSON.stringify(val));
         },
         deep:true
      },

    },

  }
</script>