vue3中watch监听localstorage
时间: 2023-11-30 17:43:03 浏览: 529
在Vue3中,可以使用`watchEffect`函数来监听`localStorage`的变化。具体步骤如下:
1. 在组件中引入`watchEffect`函数和`ref`函数。
```javascript
import { watchEffect, ref } from 'vue';
```
2. 创建一个`ref`对象来存储`localStorage`的值。
```javascript
const localStorageValue = ref(localStorage.getItem('key'));
```
3. 使用`watchEffect`函数来监听`localStorage`的变化,并更新`localStorageValue`的值。
```javascript
watchEffect(() => {
localStorageValue.value = localStorage.getItem('key');
});
```
4. 在模板中使用`localStorageValue`来展示`localStorage`的值。
```html
<template>
<div>{{ localStorageValue }}</div>
</template>
```
完整代码如下:
```javascript
<template>
<div>{{ localStorageValue }}</div>
</template>
<script>
import { watchEffect, ref } from 'vue';
export default {
setup() {
const localStorageValue = ref(localStorage.getItem('key'));
watchEffect(() => {
localStorageValue.value = localStorage.getItem('key');
});
return {
localStorageValue,
};
},
};
</script>
```
阅读全文
相关推荐


















