使用watch监听 解决vuex状态更新后获取值不更新问题
时间: 2023-06-19 11:04:16 浏览: 58
当 Vuex 状态发生变化时,我们可以使用 Vue 中的 `watch` 方法来监听状态变化,并在状态发生变化时执行相应的操作。具体的实现步骤如下:
1. 在组件中引入 `Vuex` 并获取需要监听的状态。
```javascript
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['count']) // 获取状态
},
watch: {
count(newVal, oldVal) { // 监听状态
console.log(`count 更新了,新值为:${newVal},旧值为:${oldVal}`)
}
}
}
```
2. 在组件中使用 `watch` 监听状态变化。
```javascript
watch: {
count(newVal, oldVal) { // 监听状态
console.log(`count 更新了,新值为:${newVal},旧值为:${oldVal}`)
}
}
```
在上述代码中,我们使用 `watch` 方法来监听 `count` 状态的变化,并在状态变化时打印出新值和旧值。
需要注意的是,`watch` 监听的是状态的变化,而不是状态的引用变化。因此,如果状态是一个对象,那么需要监听对象属性的变化,而不是对象本身的变化。可以使用 `$watch` 方法来监听对象属性的变化。
```javascript
this.$watch(
() => this.$store.state.obj,
(newVal, oldVal) => {
console.log('obj 变化了', newVal, oldVal)
}
)
```
总之,使用 `watch` 监听 Vuex 状态的变化可以解决状态更新后获取值不更新的问题。