데모보기




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

+ Recent posts