vue 监听localStorage.getItem('username')是否变化,变化后刷新页面

可以使用`window.addEventListener`监听`storage`事件，当localStorage发生变化时会触发该事件。具体实现如下：

window.addEventListener('storage', function(event) {
  if (event.key === 'username') {
    location.reload();
  }
});

当`localStorage`中`username`的值发生变化时，页面会自动刷新。

相关问题

vue 监听localStorage.getItem('username')是否变化

你可以使用 `window.addEventListener('storage', callback)` 来监听 `localStorage` 的变化，当 `localStorage` 中的值发生改变时，会触发 `storage` 事件。在回调函数中，你可以检查 `localStorage.getItem('username')` 的值是否发生了变化。例如：

window.addEventListener('storage', function(event) {
  if (event.key === 'username') {
    const newUsername = event.newValue;
    const oldUsername = event.oldValue;
    console.log(`localStorage 'username' has changed from ${oldUsername} to ${newUsername}`);
  }
});

这里 `event.key` 表示发生变化的 `localStorage` 键名，`event.newValue` 表示变化后的值，`event.oldValue` 表示变化前的值。在这个例子中，我们检查了 `event.key` 是否为 `'username'`，如果是，就会输出变化信息。

vue在app.vue监听localstorage值变化

可以回答这个问题。在app.vue中可以使用watch监听localstorage的变化，具体代码如下：

watch: {
'$store.state.localstorageValue': function (newVal, oldVal) {
// localstorage值变化后的操作
}
}

当localstorage的值发生变化时，会触发watch中的回调函数，从而实现对localstorage值的监听。