https://next.vuex.vuejs.org/guide/state.html#the-mapstate-helper
<script>
import Loader from '~/components/Loader'
export default {
components: { Loader },
component:{
Loader
},
data() {
return{
imageLoading:true
}
},
computed: {
image() {
return this.$store.state.about.image
},
name(){
return this.$store.state.about.name
},
email(){
return this.$store.state.about.email
},
blog(){
return this.$store.state.about.blog
},
phone(){
return this.$store.state.about.phone
}
},
mounted() {
this.init()
},
methods:{
async init() {
await this.$loadImage(this.image)
this.imageLoading = false
}
}
}
</script>
이러한 코드를
<script>
import { mapState } from 'vuex' //수정
import Loader from '~/components/Loader'
export default {
components: { Loader },
component:{
Loader
},
data() {
return{
imageLoading:true
}
},
computed: {
...mapState('about',[ //수정
'image', //수정
'name', //수정
'email', //수정
'blog', //수정
'phone' //수정
])
},
mounted() {
this.init()
},
methods:{
async init() {
await this.$loadImage(this.image)
this.imageLoading = false
}
}
}
</script>
이렇게 작성할 수 있다.
vuex에서 mapstate를 가져와서 첫 번째 인수로 about을 가져오고 두 번째 인수로 배열로 상태들을 가져오면 mapstate 함수로 실행된 결과가 반환이 됩니다.
'vue.js' 카테고리의 다른 글
vue Router (0) | 2021.11.17 |
---|---|
vue router [scroll behavior][화면 변경 시 스크롤 위치 조정] (0) | 2021.11.17 |
모든 컴퍼넌트에서 전역 스타일 가져오기 (0) | 2021.11.16 |
Bootstrap [breakpoint] 반응형웹 (0) | 2021.11.16 |
404 page not found (0) | 2021.11.16 |