pages/studymapmutations/index.vue
<template>
<div class="map_mutations">
<h1>mapMutations</h1>
<button @click='show'>버튼</button>
<p>{{ count }}</p>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
data(){
return{
count : 0
}
},
methods : {
show(){
// 기존 방식
// this.$store.commit( "studymapmutations/setCount" );
this.setCount();
// 기존 방식
// this.count = this.$store.getters[ "studymapmutations/getCount" ];
this.count = this.getCount;
},
...mapMutations( "studymapmutations", [
"setCount"
])
},
computed : {
...mapGetters( "studymapmutations", [
"getCount"
])
}
}
</script>
<style lang="scss" scoped>
.map_mutations{ width: 500px; margin: 0 auto; padding-top: 50px; text-align: center;
h1{ margin-bottom: 50px; }
button{ width: 500px; font-size: 100px; padding: 50px 0; margin-bottom: 50px; }
p{ font-size: 50px; }
}
</style>
store/studymapmutations.js
export default{
state(){
return{
count : 0
}
},
mutations : {
setCount( state ){
state.count++;
}
},
getters : {
getCount( state ){
return state.count;
}
}
}
'frontend > vue' 카테고리의 다른 글
| Vue( Nuxt.js ) axios, async, await (0) | 2019.10.30 |
|---|---|
| Vue( Nuxt.js ) mapActions( store module ) (0) | 2019.01.22 |
| Vue( Nuxt.js ) mapGetters( store module ) (0) | 2019.01.22 |
| Vue( Nuxt.js ) axios, promise (0) | 2019.01.21 |
| Vue( Nuxt.js ) Filter (0) | 2019.01.21 |