vueのcomputedとvuexのgetters計算プロパティパラメータ
9178 ワード
computed
getters
mutations
<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
}
},