安装vuex并实现第一个例子,state的用法 实现多组件“加水”“放水”, 并添加“水满了,感谢大家的付出!” “水放空了,请节约用水!”的提示
时间: 2023-08-29 21:04:23 浏览: 46
首先,我们需要安装vuex,可以使用npm或yarn进行安装。
```
npm install vuex --save
```
或
```
yarn add vuex
```
然后,在项目中创建一个store.js文件,用于管理全局状态。在store.js中,我们需要引入Vue和Vuex,并且创建一个新的vuex实例,定义了一个初始状态state和一些mutation函数,用于更新state。
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
waterLevel: 0
},
mutations: {
addWater(state) {
if (state.waterLevel < 100) {
state.waterLevel += 10
} else {
alert('水满了,感谢大家的付出!')
}
},
removeWater(state) {
if (state.waterLevel > 0) {
state.waterLevel -= 10
} else {
alert('水放空了,请节约用水!')
}
}
}
})
export default store
```
在上面的代码中,我们定义了一个名为waterLevel的状态,初始值为0,以及两个mutation函数addWater和removeWater。addWater函数用于添加水,每次添加10个单位,同时判断水位是否达到100,如果达到100,则显示提示信息。removeWater函数用于移除水,每次移除10个单位,同时判断水位是否为0,如果为0,则显示提示信息。
接下来,在组件中使用Vuex。我们可以使用mapState和mapMutations函数来简化代码。在AddWater.vue中,我们需要引入Vuex和mapMutations函数,并且在methods中使用mapMutations将addWater函数映射到组件中。
```
<template>
<div>
<button @click="addWater">加水</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['addWater'])
}
}
</script>
```
在RemoveWater.vue中,我们也需要引入Vuex和mapMutations函数,并且在methods中使用mapMutations将removeWater函数映射到组件中。
```
<template>
<div>
<button @click="removeWater">放水</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['removeWater'])
}
}
</script>
```
最后,在App.vue中,我们需要引入Vuex和mapState函数,并且使用computed将waterLevel状态映射到组件中。
```
<template>
<div>
<h1>水位:{{ waterLevel }}</h1>
<AddWater />
<RemoveWater />
</div>
</template>
<script>
import AddWater from './components/AddWater'
import RemoveWater from './components/RemoveWater'
import { mapState } from 'vuex'
export default {
components: {
AddWater,
RemoveWater
},
computed: {
...mapState(['waterLevel'])
}
}
</script>
```
现在,我们就可以在浏览器中查看效果了。每次点击“加水”按钮,水位会增加10个单位,当水位达到100时,会显示“水满了,感谢大家的付出!”的提示信息。每次点击“放水”按钮,水位会减少10个单位,当水位为0时,会显示“水放空了,请节约用水!”的提示信息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)