。安装vuex并实现第一个例子,state的用法 •实现多组件“加水”《放水”并添加“水满了,感谢大家的付出!”“水放空了,请节约用水!”的提示
时间: 2023-08-24 18:05:04 浏览: 42
首先,需要安装 vuex,可以使用以下命令:
```
npm install vuex --save
```
然后,在项目中创建一个 store.js 文件,用于管理全局状态。
在 store.js 中,我们首先需要定义 state,即存储数据的地方。在这个例子中,我们需要存储水的状态,包括水的数量和是否满了。
```
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
waterLevel: 0,
isFull: false,
},
});
export default store;
```
在组件中,我们可以使用 mapState 辅助函数将 state 映射为组件的计算属性。比如:
```
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['waterLevel', 'isFull']),
},
};
```
接着,我们可以定义 mutations,即用于修改 state 的方法。在这个例子中,我们需要定义两个 mutations,一个用于加水,一个用于放水。加水的方法会将水的数量加一,当水的数量达到一定值时,设置 isFull 为 true。放水的方法会将水的数量清零,并将 isFull 设置为 false。
```
const store = new Vuex.Store({
state: {
waterLevel: 0,
isFull: false,
},
mutations: {
addWater(state) {
state.waterLevel += 1;
if (state.waterLevel >= 10) {
state.isFull = true;
alert('水满了,感谢大家的付出!');
}
},
removeWater(state) {
state.waterLevel = 0;
state.isFull = false;
alert('水放空了,请节约用水!');
},
},
});
```
最后,在组件中,我们可以使用 mapMutations 辅助函数将 mutations 映射为组件的方法。比如:
```
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations(['addWater', 'removeWater']),
},
};
```
现在,我们就可以在组件中调用 addWater 和 removeWater 方法来修改全局状态了。比如:
```
<template>
<div>
<p>水的数量:{{ waterLevel }}</p>
<p v-if="isFull">水已满</p>
<button @click="addWater">加水</button>
<button @click="removeWater">放水</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['waterLevel', 'isFull']),
},
methods: {
...mapMutations(['addWater', 'removeWater']),
},
};
</script>
```
这样,我们就完成了一个简单的“加水”“放水”的例子,并且加入了提示语句。