데모보기




pages/studystoremodule/index.vue


<template>
<div class="study_store_module">
<h1>STUDY STORE MODULE</h1>
<button @click="getList()">버튼</button>
<ul>
<li v-for="( item, index ) in list" :key="index">
{{ item.txt }}
</li>
</ul>
</div>
</template>

<script>
export default {
data(){
return{
list : []
}
},

methods : {
getList(){
this.list = this.$store.getters[ "studystoremodule/getData" ];
}
}
}
</script>

<style lang="scss" scoped>
.study_store_module{ width: 500px; margin: 0 auto; text-align: center; padding-top: 50px;
h1{ margin-bottom: 50px; }
button{ width: 500px; font-size: 100px; padding: 20px 0; margin-bottom: 50px; }
ul{
li{ margin-bottom: 20px; }
}
}
</style>






store/studystoremodule.js



export default{
state(){
return{
list : [
{ txt : "Store Module : 첫번째 리스트" },
{ txt : "Store Module : 두번째 리스트" },
{ txt : "Store Module : 세번째 리스트" },
{ txt : "Store Module : 네번째 리스트" },
{ txt : "Store Module : 다섯번째 리스트" }
]
}
},

getters : {
getData : function( state ){
return state.list;
}
}
}





store/index.js


export const state = () => ({
list : [
{ txt : "첫번째 리스트" },
{ txt : "두번째 리스트" },
{ txt : "세번째 리스트" },
{ txt : "네번쨰 리스트" },
{ txt : "다섯번째 리스트" }
]
});


'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) axios, promise  (0) 2019.01.21
Vue( Nuxt.js ) Filter  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store )  (0) 2019.01.21
Vue Plugin  (0) 2019.01.15
Vue Mixin( 믹스인 )  (0) 2019.01.15

+ Recent posts