pages/studymapactions/index.vue
<template>
<div class="map_actions">
<h1>mapActions</h1>
<button @click='show'>버튼</button>
<p>{{ count }}</p>
</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
data(){
return{
count : 0
}
},
methods : {
show(){
// 기존 방식
// this.$store.dispatch( "studymapactions/setCount" );
this.setCount();
// 기존 방식
// this.count = this.$store.getters[ "studymapactions/getCount" ];
this.count = this.getCount;
},
...mapActions( "studymapactions", [
"setCount"
])
},
computed : {
...mapGetters( "studymapactions", [
"getCount"
])
}
}
</script>
<style lang="scss" scoped>
.map_actions{ 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/studymapactions.js
export default{
state(){
return{
count : 0
}
},
mutations : {
setCount( state ){
state.count++;
}
},
actions : {
setCount({ commit }){
commit( "setCount" );
}
},
getters : {
getCount( state ){
return state.count;
}
}
}
'frontend > vue' 카테고리의 다른 글
| Vue(Nuxt.js) Global SCSS 설정 (0) | 2019.10.30 |
|---|---|
| Vue( Nuxt.js ) axios, async, await (0) | 2019.10.30 |
| Vue( Nuxt.js ) mapMutations( 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 |