vue 如何监听localstorage中值改变

在Vue中，你可以使用watch来监听localStorage中值的变化。

首先，在Vue组件中，可以使用watch属性来监听localStorage中的值。在watch属性中，你可以指定一个函数，当localStorage中的值发生改变时，该函数会被调用。

以下是一个示例：

export default {
  data() {
    return {
      localStorageValue: localStorage.getItem('myValue') // 初始化时获取localStorage中的值
    };
  },
  watch: {
    localStorageValue(newValue) {
      // 当localStorage中的值发生改变时，会触发这个函数
      console.log('localStorageValue changed:', newValue);
    }
  },
  mounted() {
    // 监听localStorage的storage事件，当localStorage中的值发生改变时，会触发该事件
    window.addEventListener('storage', this.handleStorageChange);
  },
  beforeDestroy() {
    // 在组件销毁前，移除localStorage的storage事件监听
    window.removeEventListener('storage', this.handleStorageChange);
  },
  methods: {
    handleStorageChange(event) {
      if (event.key === 'myValue') {
        this.localStorageValue = event.newValue;
      }
    }
  }
}

在上述示例中，我们首先在data中初始化了localStorageValue，并将localStorage中的myValue赋值给它。然后使用watch属性监听localStorageValue的改变，并在该函数中做出相应的处理。

在mounted钩子中，我们使用addEventListener监听localStorage的storage事件，当localStorage中的值发生改变时，会触发该事件。在beforeDestroy钩子中，我们使用removeEventListener移除localStorage的storage事件监听。

最后，我们定义了一个handleStorageChange方法，用于处理localStorage中的值改变事件。在该方法中，我们判断event.key是否为myValue，如果是，则更新localStorageValue的值