已经完成了Vuex项目的部署,话不多说 开整:
首先在src/components下创建一个Count.vue
1.部署基础样式:
<template>
<div class="box">
<h1>当前求和为:??</h1>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button>+</button>
<button>-</button>
<button>当前求和为奇数再加</button>
<button>等一等再加</button>
</div>
</template>
<script>
export default {
name: "Count",
data() {
return {
};
},
methods: {
},
mounted() {
},
};
</script>
<style scoped lang="css">
button {
margin: 5px;
}
</style>
2.挂载组件 在App.vue中导入Count.vue,并注册使用
<template>
<div>
<Count></Count>
</div>
</template>
<script>
import Count from "@/components/Count.vue";
export default {
components: {
Count,
},
};
</script>
<style>
</style>
打开浏览器查看 页面如下:
3.我需要在下拉选框的时候,获取相应的数据,使用v-model绑定select
data() {
return {
n: 1, //用户选择的数字
};
},
//这里使用修饰符更加严谨点
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
4.当我点击按钮的时候,数据可以进行相应的操作
4.1给四个按钮绑定点击事件
<button @click="add">+</button>
<button @click="decrement">-</button>
<button @click="addOdd">当前求和为奇数再加</button>
<button @click="addWait">等一等再加</button>
4.2在methods中声明函数
methods: {
add() {
},
decrement() {
},
addOdd() {
},
addWait() {
},
}
4.3 在store.index里面定义初始值sum
const state = {
sum: 0 //当前的值
}
4.4 先进行同步的加减运算,也就是在mutations中操作数据
// state传入的是sum的值
const mutations = {
//加法
JIA(state, value) {
state.sum += value
},
//减法
JIAN(state, value) {
state.sum -= value
}
}
4.5 写好函数后 回到Count.vue中
methods:{
add() {
//通过调用commit里面的方法 进行加减操作
this.$store.commit("JIA", this.n);
},
decrement() {
this.$store.commit("JIAN", this.n);
},
},
//在mounted函数中打印Count组件中的信息
mounted() {
console.log("Count", this.$store);
},
现在的页面 就可以实现对数据的删减
4.6 回到代码中,现在想要实现求和为奇数再加和等一等再加,两个需求一个需要判断一下,另一个是延时效果,都是异步操作。
const actions = {
jiaOdd(context, value) {
//判断是否为奇数
if (context.state.sum % 2) {
context.commit('JIA', value)
}
},
//延时器
jiaWait(context, value) {
setTimeout(() => {
context.commit('JIA', value)
}, 500)
},
}
4.7 回到Count.vue中
methods:{
addOdd() {
this.$store.dispatch("jiaOdd", this.n);
},
addWait() {
this.$store.dispatch("jiaWait", this.n);
},
}
回到页面查看:
以上就是三种属性的基础使用,后续不定期更新(喜欢的话 点个赞支持一下 嘿嘿)