Vue.js 중급 강의 정리 - Vuex Helper

Vue의 Computed 속성

• 템플릿 내에 표현을 간결하게 만들기 위해 사용한다.
• 너무 많은 연산을 하나의 메소드로 표현한다.

Helper 함수로 각 속성들을 더 쉽게 사용 할 수 있다.

• state -> mapState
• getters -> mapGetters
• mutations -> mapMutations
• actions -> mapActions

Helper 사용법

• ES6 객체 펼침(산개, 뿌리는) 연산자 개이득!

// App.vue
import { mapState, mapGetters } from 'vuex'
import { mapMutations, mapActions } from 'vuex'

export default {
  computed() { ...mapState(['num']), ... mapGetters(['countedNum']) },
  methods: { ...mapMutations(['clickBtn']), ...mapActions(['asyncClickBtn']) }
}

mapState

• Vuex에 선언한 state 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

// App.vue
import { mapState } from 'vuex'

computed() {
  ...mapState(['num'])
  // num() { return this.$store.state.num; }
}

// store.js
state: {
  num: 10
}

<!-- <p>{{ this.$store.state.num }} </p> -->
<p> {{ this.num }} </p>

mapGetters

• Vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

// App.vue
import { mapGetters } from 'vuex'

computed() { ...mapGetters(['reverseMessage']) }

// store.js
getters : {
  reverseMessage(state) {
    return state.msg.split('').reverse().join('');
  }
}

<!-- <p>{{ this.$store.getters.reversemessage }}</p> -->
<p> {{ this.reverseMessage }} </p>

mapMutations

• Vuex에 선언한 mutations 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

// App.vue
import { mapMutations } from 'vuex'

methods: {
  ...mapMutations(['clickBtn']),
  authLogin(){},
  displayTable(){}
}

// store.js
mutations: {
  clickBtn(state) {
    alert(state.msg);
  }
}

<button @click="clickBtn">popup message</button>

• @click
  • 축약형으로 아래의 표현과 같습니다.
  • @ == v-on
• 그외 참고 축약형 디렉티브
  • : == v-bind:
  • @ == v-on:
  • # == v-slot 

mapActions

• Vuex에 선언한 actions 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

// App.vue
import { mapActions } from 'vuex'

methods : {
  ...mapActions(['delayClickBtn']),
}

// store.js
actions: {
  delayClickBtn(context) {
    setTimeout(() => context.commit('clickBtn'), 2000);
  }
}

<button @click="delayClickBtn">delay popup message</button>

헬퍼의 유연한 문법

• Vuex에 선언한 속성을 그대로 컴포넌트에 연결하는 문법

// 배열 리터럴
...mapMutations([
  'clickBtn', // 'clickBtn' : clickBtn
  'addNumber' // addNumber(인자)
])

 

• Vuex에 선언한 속성을 컴포넌트의 특정 메서드에다가 연결하는 문법

// 객체 리터럴
...mapMutations({
  popupMsg : 'clickBtn'
})

헬퍼 함수가 주는 간편함

• store에 액세스 할 때 간편하게 액세스 할 수 있다!
• 템플릿을 표현식을 작성할 수 있다.
• store의 속성에 맞는 적절한 헬퍼를 사용하면 된다!