pages/studymapgetters/index.vue
<template>
<div class="map_getters">
<h1>mapGetters</h1>
<button @click='show'>버튼</button>
<ul>
<li v-for="( item, index ) in list" :key="index">
{{ item.txt }}
</li>
</ul>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data(){
return{
list : []
}
},
methods : {
show(){
this.list = this.getList;
}
},
computed : {
...mapGetters({
getList : "studygetters/getList"
})
}
}
</script>
<style lang="scss" scoped>
.map_getters{ width: 500px; margin: 0 auto; text-align: center; padding-top: 50px;
h1{ margin-bottom: 50px; }
button{ width: 500px; padding: 50px 0; font-size: 50px; margin-bottom: 50px; }
ul{
li{ margin-bottom: 10px; }
}
}
</style>
store/studygetters.js
export default{
state(){
return{
list : [
{ txt : "첫번째 리스트" },
{ txt : "두번째 리스트" },
{ txt : "세번째 리스트" },
{ txt : "네번째 리스트" },
{ txt : "다섯번째 리스트" }
]
}
},
getters : {
getList( state ){
return state.list;
}
}
}
'frontend > vue' 카테고리의 다른 글
| Vue( Nuxt.js ) mapActions( store module ) (0) | 2019.01.22 |
|---|---|
| Vue( Nuxt.js ) mapMutations( store module ) (0) | 2019.01.22 |
| Vue( Nuxt.js ) axios, promise (0) | 2019.01.21 |
| Vue( Nuxt.js ) Filter (0) | 2019.01.21 |
| Vue( Nuxt.js ) Vuex( Store ) Module (0) | 2019.01.21 |