安装vuex并实现第一个例子,state的用法 实现多组件“加水”“放水”, 并添加“水满了,感谢大家的付出!” “水放空了,请节约用水!”的提示
时间: 2023-08-29 16:04:22 浏览: 29
首先,你需要安装 Vuex,可以使用 npm 命令进行安装:
```
npm install vuex --save
```
然后在你的项目中创建一个 store.js 文件,用于存储 Vuex 的状态管理逻辑。在 store.js 中,我们需要定义 state、mutations 和 actions。
```javascript
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
waterLevel: 0, // 水位初始化为0
message: '' // 提示信息
},
mutations: {
addWater(state) {
state.waterLevel += 10 // 加水10
if (state.waterLevel >= 100) {
state.message = '水满了,感谢大家的付出!'
}
},
drainWater(state) {
state.waterLevel -= 10 // 放水10
if (state.waterLevel <= 0) {
state.message = '水放空了,请节约用水!'
}
}
},
actions: {
addWater(context) {
context.commit('addWater')
},
drainWater(context) {
context.commit('drainWater')
}
}
})
export default store
```
在上面的代码中,我们定义了一个名为 waterLevel 的 state,用于存储水位。同时,我们还定义了两个 mutations,分别是 addWater 和 drainWater,用于增加和减少水位。在 mutations 中,我们还添加了一些逻辑,当水位达到一定值时,会显示相应的提示信息。最后,我们也定义了两个 actions,用于触发 mutations。
现在,在我们的组件中,我们可以使用 Vuex 的 state 和 actions 了。比如,我们可以在组件中通过 $store.state.waterLevel 来获取当前的水位,通过 $store.actions.addWater() 来触发加水的操作。
```vue
// WaterAdd.vue
<template>
<div>
<h2>加水</h2>
<button @click="$store.dispatch('addWater')">加水</button>
</div>
</template>
<script>
export default {
name: 'WaterAdd'
}
</script>
```
```vue
// WaterDrain.vue
<template>
<div>
<h2>放水</h2>
<button @click="$store.dispatch('drainWater')">放水</button>
</div>
</template>
<script>
export default {
name: 'WaterDrain'
}
</script>
```
```vue
// WaterLevel.vue
<template>
<div>
<h2>当前水位:{{ $store.state.waterLevel }}</h2>
<p>{{ $store.state.message }}</p>
</div>
</template>
<script>
export default {
name: 'WaterLevel'
}
</script>
```
最后,我们需要在 App.vue 中引入这些组件和 store:
```vue
<template>
<div id="app">
<WaterAdd />
<WaterDrain />
<WaterLevel />
</div>
</template>
<script>
import WaterAdd from './components/WaterAdd.vue'
import WaterDrain from './components/WaterDrain.vue'
import WaterLevel from './components/WaterLevel.vue'
import store from './store'
export default {
name: 'App',
components: {
WaterAdd,
WaterDrain,
WaterLevel
},
store
}
</script>
```
现在,你可以在浏览器中运行你的应用了。你会发现,当你点击加水或放水时,水位会相应地增加或减少,同时也会显示相应的提示信息。