在vue中如何监听本地存储，根据本地存储的值的变化对页面进行相对应的操作？

目录

一、main文件中注册全局方法

二、触发

三、监听

四、vue中的watch方法（以及相关属性设置）

一、main文件中注册全局方法

 首先在mian.js中，先给vue.protorype注册全局的方法。在这个方法里面创建一个事件，假设要监听的值为yearId。

  当在执行sessionStorage.setItem(k, val) 的时候，

  通过 newStorageEvent.initStorageEvent进行初始化

  再进行派发对象window.dispatchEvent(newStorageEvent)

Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'yearId') {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent')
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val)
        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null)
        // 派发对象
        window.dispatchEvent(newStorageEvent)
      }
    }
    return storage.setItem(key, newVal)
  }
}

二、触发

获取监听的值

  this.resetSetItem("yearId", e);

三、监听

在需要监听本地存储的值的组件中加入以下的代码进行监听。如果是想要根据本地存储的值的变化来对页面进行刷新修改的话，可以在created钩子函数中进行监听。

window.addEventListener("setItem", () => {
    console.log('监听')
});

四、vue中的watch方法（以及相关属性设置）

以上就是动态监听本地存储的一种方法，以下是总结vue中watch方法的用法

1、watch方法

<template>
    <div>
      <p>你的年龄为: {{newold}}</p>
      <p>年龄: <input type="text" v-model="yearold"></p>
    </div>
</template>

<script>
export default {

  data() {
    return {
   yearold：16，
newold:''
    }
  },
  watch: {
      yearold(yearold) {
        this.newold = yearold+1;
      }
  },
}
</script>

2、handler、immediate、与深度监听

当watch执行的时候就用到handler和immediate属性。如果immediate设置了false，就和上面1的效果是一样的

<template>
    <div>
      <p>姓: {{people.firstname}}</p>
      <p>姓: <input type="text" v-model="people.firstname"></p>
    </div>
</template>

<script>
export default {
  data() {
    return {
        people: {
          firstname: "菜"
        }
    }
  },
  watch: {
      people: {
        handler(e, v) {
            console.log('监听到它在变化');
        },
        immediate: true
        deep: true
     }
  }
}
</script>

当加上deep：true，就是监听整个people对象的属性，不加的话，当你输入数据该百年firstname的值的时候，会发现是无效的。因为js中，vue不能检测到对象属性的添加或者删除，由于vue会在初始化实例的时候对属性执行getter/setter转化的过程，所以属性必须在data对象上存在才能让vue转换她，这样才能够响应。