computed
<template>
<div id="app">
<h3>{{count(1)}}</h3> //需要在计算时传值
<router-view></router-view>
</div>
</template>
data() {
return {
counter: 100
}
},
computed: {
count() { //不在此处接收传入的值
return function (num) {//先return一个函数,把属性变成函数属性,参数接收传入的值
return this.counter - num //再return出计算结果
}
}
}
getters
this.$store.getters.moreThree(3)//在组件中使用需要传入值
state: {
arr: [1, 2, 3, 4, 5]
},
getters: {
moreThree(state, getters) { //不在此处接收传入的值，默认传入state,第二个参数也可以是getters
return function (num) {//先return一个函数,把属性变成函数属性,参数接收传入的值
return state.arr.filter(item => item > num) //再return出计算结果
}
}
}
mutations
<template>
<div>
<button @click="add(20)">+</button>//改变vuex中的状态需要传入值
<button @click="sub(10)">-</button>
</div>
</template>
<script>
export default {
methods: {
add(num) {//在属性中先接收template中的值
this.$store.commit('add', num)//第二个参数接受template中的值
},
sub(num) {
this.$store.commit('sub', num)
}
}
}
</script>
mutations: {//vuex中的mutations
add(state, num) {//在vuex中的mutations对象与上面两种不一样,可以直接在属性中设置参数接受组件中需要传入的值
state.count += num
},
sub(state, num) {
state.count -= num
}
},
————————————————
版权声明：本文为CSDN博主「花涛的个人博客」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40680292/java/article/details/103191735
