addEventListener 监听vuex里的数据变化
时间: 2023-07-22 11:34:51 浏览: 48
要监听 Vuex 中的数据变化,可以使用 Vuex 提供的 `watch` 方法,它可以监听 store 中的状态变化并触发回调函数。具体用法如下:
```javascript
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['myData'])
},
created() {
this.$store.watch(
(state) => state.myData, // 监听的状态
(newValue, oldValue) => {
// 回调函数,可以在这里处理状态变化后的逻辑
console.log(`myData changed from ${oldValue} to ${newValue}`)
}
)
}
}
```
这里使用了 `mapState` 辅助函数来获取 `myData` 状态,然后在 `created` 钩子函数中使用 `watch` 方法来监听状态变化。当 `myData` 状态发生变化时,回调函数会被触发,可以在回调函数中处理变化后的逻辑。
相关问题
用window.addEventListener监听iframe的变化
可以使用`MutationObserver`监听`iframe`元素的变化,以下是具体的实现方式:
1. 首先获取到`iframe`元素,可以通过`document.querySelector()`或者`document.getElementById()`等方法获取到该元素。
2. 然后创建一个`MutationObserver`对象,并将其绑定到该`iframe`元素上。
3. 在回调函数中,可以处理当`iframe`元素内容变化时的操作。
以下是示例代码:
```javascript
const iframe = document.querySelector('iframe');
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
// 处理当iframe内容变化时的操作
}
});
});
observer.observe(iframe, { childList: true });
```
vue监听localStorage的数据变化
可以通过使用`window.addEventListener`来监听`storage`事件,从而实现监听`localStorage`的数据变化。具体的实现如下:
```js
window.addEventListener('storage', function(e) {
if (e.key === 'localStorageKey') {
// 处理localStorage数据变化的逻辑
}
})
```
其中,`e`参数是一个`StorageEvent`对象,包含了一些有用的信息,比如`key`属性表示发生变化的`localStorage`的键名。在回调函数中,可以根据需要对`localStorage`中相应的数据进行处理。
需要注意的是,`storage`事件是在除当前窗口外的其他窗口或标签页中发生`localStorage`变化时才会触发的,如果在当前窗口中修改了`localStorage`的值,`storage`事件并不会触发。