데모보기



pages/studystore/index.vue


<template>
<div class="studystore">
<h1>STORE</h1>
<ul>
<li v-for="( item, index ) in getList()" :key="index">
{{ item.txt }}
</li>
</ul>
</div>
</template>

<script>
export default {
data(){
return{
getList(){
return this.$store.state.list;
}
}
}
}
</script>

<style lang="scss" scoped>
.studystore{ width: 500px; margin: 0 auto; text-align: center; padding-top: 50px;
h1{ margin-bottom: 25px; }
ul{
li{ margin-bottom: 10px; }
}
}
</style>






store/index.js


import Vuex from 'vuex';
const store = () => new Vuex.Store({
state : {
list : [
{ txt : "첫번째 리스트" },
{ txt : "두번째 리스트" },
{ txt : "세번째 리스트" },
{ txt : "네번쨰 리스트" },
{ txt : "다섯번째 리스트" }
]
}
})

export default store;


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

Vue( Nuxt.js ) Filter  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store ) Module  (0) 2019.01.21
Vue Plugin  (0) 2019.01.15
Vue Mixin( 믹스인 )  (0) 2019.01.15
Vue TweenMax Slider Gallery  (0) 2019.01.15

+ Recent posts