vue3 watch监听localStorage

在 Vue 3 中，你可以使用 `watch` 钩子监听浏览器的 `localStorage`。由于 `localStorage` 不是响应式的，你需要手动触发检查和更新。以下是基本的步骤：

1. 定义一个响应式的数据变量，用于存储从 `localStorage` 加载的数据：

data() {
  return {
    storedData: JSON.parse(localStorage.getItem('yourKey') || 'defaultValue')
  };
},

2. 使用 `watch` 监听 `localStorage` 的变化：

watch: {
  '$root.$store.state.keyFromLocalStorage': function (newValue, oldValue) {
    localStorage.setItem('yourKey', JSON.stringify(newValue));
    this.storedData = newValue; // 更新本地存储并同步至组件内部数据
  }
},

这里假设你有一个全局的状态管理库 (`$root.$store`) 并从中获取需要监听的 key。`newValue` 是 `localStorage` 的新值，`oldValue` 则是旧值。每当状态发生改变，都会触发 `watch` 的回调，并将新值保存回 `localStorage`。

相关问题

vue3 watch监听localstorage

Vue3 中的 `watch` 可以用来监听浏览器的 localStorage 变化，这样当localStorage的数据发生改变时，你的组件会自动更新。以下是基本的步骤：

1. 首先，在 Vue 组件的 data 或者 computed 中定义你想监听的 localStorage 键名：

data() {
  return {
    myStorageValue: window.localStorage.getItem('myKey') || ''
  }
},

2. 使用 `watch` 来监听变化：

watch: {
  // 当 'myKey' 存储的值发生变化时，这个函数会被触发
  'myStorageValue': function (newVal, oldVal) {
    console.log('localStorage value has changed:', newVal);
    // 在这里处理新旧值的变化
  },
  '$route'(to, from) {
    // 如果你想要监听路由变化并影响 localStorage，可以在这里添加相应的逻辑
    this.myStorageValue = JSON.stringify(to.query); // 示例操作
  }
}

在这个例子中，如果 `myKey` 的值从本地存储中获取到或者路由参数变化时，`myStorageValue` 就会重新设置，并调用回调函数。

vue2 watch监听localstorage

Vue 2中的`watch`可以用于监听`localStorage`的变化。你可以创建一个`watcher`，它会指定需要监视的属性和对应的回调函数。当`localStorage`中的数据发生变化时，这个回调就会被触发。

这是一个基本的例子：

data() {
  return {
    storedValue: localStorage.getItem('yourKey') || ''
  }
},
watch: {
  storedValue(newVal, oldVal) {
    // 当 localstorage 中的 'yourKey' 变化时，这里会被调用
    console.log(`存储值已更新，新值：${newVal}`);
    // 这里可以对新的值做进一步处理，比如更新组件内的状态或视图
  }
}

在这个例子中，如果你在其他地方修改了`localStorage['yourKey']`，`storedValue`就会更新，并且`watch`里的回调函数会被调用。