반복적인 내용을 효율적으로 관리하는 방법: Vuex Helpers

반복적으로 해당 데이터를 보여줄때 효율적으로 관리하는 방법

 

url: State | Vuex (vuejs.org)

State | Vuex

 

예제 코드

변경전

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
    }
    */
  },

 

변경후

import {mapState} from 'vuex'

computed: {
    // ... : 전개 연산자 선언
    //    ...mapState('모듈명', 배열데이터)
    ...mapState('about', [
      'image',
      'name',
      'email',
      'blog',
      'phone'
    ])

  },