vuex实现多组件“加水”“放水”, 并添加“水满了,感谢大家的付出!” “水放空了,请节约用水!”的提示
时间: 2023-08-29 20:04:23 浏览: 42
可以通过Vuex实现多组件共享状态来实现这个功能。首先,需要在Vuex store中定义一个state对象来保存水的状态,同时定义mutations来修改state中的值。
```
const state = {
waterLevel: 0,
isFull: false,
isEmpty: true
}
const mutations = {
addWater(state) {
if (state.waterLevel < 100) {
state.waterLevel += 10
state.isEmpty = false
if (state.waterLevel === 100) {
state.isFull = true
alert('水满了,感谢大家的付出!')
}
}
},
drainWater(state) {
if (state.waterLevel > 0) {
state.waterLevel -= 10
state.isFull = false
if (state.waterLevel === 0) {
state.isEmpty = true
alert('水放空了,请节约用水!')
}
}
}
}
```
然后,需要在Vue组件中使用Vuex来访问store中的state和mutations。可以使用`mapState`和`mapMutations`来简化代码。
```
<template>
<div>
<p>当前水位:{{ waterLevel }}</p>
<button @click="addWater">加水</button>
<button @click="drainWater">放水</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState({
waterLevel: state => state.waterLevel,
isEmpty: state => state.isEmpty,
isFull: state => state.isFull
})
},
methods: {
...mapMutations([
'addWater',
'drainWater'
])
}
}
</script>
```
这样,在多个组件中使用相同的getter和mutation名称,就可以实现多组件共享状态的功能了。