vue3 watch监听本地存储
时间: 2023-09-30 20:09:14 浏览: 65
在Vue3中,可以使用`watch`函数来监听本地存储的值的变化。首先,在组件的`setup`函数中引入`watch`函数,并在需要监听的变量上使用`watch`函数进行监听。具体代码如下所示:
```javascript
import { watch } from 'vue'
// 在需要监听本地存储的组件中
export default {
setup() {
watch(() => localStorage.getItem('key'), (newVal, oldVal) => {
// 执行相应的刷新或修改操作
console.log('监听', newVal)
})
}
}
```
在上述代码中,我们使用`watch`函数来监听`localStorage.getItem('key')`的变化。当存储的值发生变化时,会执行回调函数并传入新值和旧值作为参数,你可以在回调函数中执行相应的刷新或修改操作。这样,当本地存储的值发生改变时,页面就会相应地进行刷新或修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue动态监听本地存储的值](https://blog.csdn.net/scarlett1017/article/details/125126925)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Vue2.0 V1.1版本 增删改查功能,全选单选与取消全选选项,使用localStorage本地存储数据和watch深度监听](https://download.csdn.net/download/weixin_47606392/85931071)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]