Vuex, 유연한 사용이 가능한 헬퍼함수 학습하기

 

 

---

 

 

1.helper함수: 각 속성들을 사용하기 용이하게 만듦

-콤포넌트가 많은 복잡한 app에서 사용할 수 있게 모듈화하기

-store.js에 한번에 몰아두는게 아닌 비슷한 기능끼리 모듈화 하기

-vuex에 내장되어 있음!

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

 

-헬퍼는 유연한 문법으로 사용 가능하다!

===>vuex에 선언한 속성을 그대로 콤포넌트로 연결

===>ES6를 사용하기 떄문에 'multipleNum' : multipleNum으로 적어야할인자를 'multipleNum'으로 축약사용가능!

===>인자를 따로 선언하지 않아도 필요한 인자를 그대로 받아서 사용

예)
...mapMutations([
	'mutipleNum',
    'minusNum'
])

 

====> vuex에 선언한 속성을 컴포넌트 특정 메서드에 연결할 수 있음

-객체 형식으로 메소드에 연결이 가능함

(*clickBtn는 객체가 아니지만, 간단하게 객체처럼 'clickBtn'으로 불러와서 동작이 가능하다는것. 우와!

형식에 구애받지 않고 유연하게 사용이 가능하다*)

...mapMutations({
	popupMsg: 'clickBtn'
})

 

 

-헬퍼를 사용하고자하는 파일에서 vuex 헬퍼를 호출

import (mapState/mapGetters/mapMutations/mapActions) form 'vuex'

- 로직 예시, computed 맵핑해주기

=>...은 ES6의 object spread operator! 는 여러개 속성을 뿌리는 연산자!

ES6의 object spread operator! 사용하는 이유
1.반드시 ...으로 연결해줘야지 기존의 속성과 매칭할수 있음
2.computed 속성과 mapGetters를 쓰기 위하여

예를 들어 두개이상의 (const,let)이 있고, 한 선언문의 연산자를 간편하게 가져오고 싶을때 '...변수명'으로 사용

export default{
	computed(){...mapState(['num'])}
}

 

 

2.mapState

vuex의 state를 더 쉽게 콤포넌트간 통신 가능하도록!!!

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

computed(){
	...mapState('num'])
    }

===>...으로 num의 연산자를 다 가져올 수 있음!!
    
===store.js===
state:{
	num:10
    }

===vue파일===
<p>{{ this.num }}</p>

 

3.mapGetters

-vuex의 getters속성을 뷰 컴포넌트로 연결

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

computed(){
	...mapGetters('mutipleNum'])
    }

===>...으로 num의 연산자를 다 가져올 수 있음!!
    
===store.js===
getters:{
	mutipleNum(state){
    	변경하고 싶은 내용}
    }

===vue파일===
<p>{{ this.multipleNum }}</p>

 

4.todolist를 리팩토링하기

원래는 this.$store.state.todoItem과 같이 사용했다면, 

Vuex의 mapGetters를 이용하여 접근

===store.js에서 기존의 state를 getters로 가져오기위해서 getters문안 추가 ===

getters:{
	storedTodoItems(state){
    	return.state.todoItems;
    }
}

=>state를 인자로 받아오는 storedTodoItems,
state중 todoItems연산자를 반환(return)해준다

 

-todolist.vue에서도 간편하게 받아오기 가능!

 <li v-for="(todoItem, index) in this.$store.state.todoItem" v-bind:key="todoItem.item" class="shadow">
 
 에서 
 
 this.$store.getters.storedTodoItems로 변경

 

=>그러면 state가 아닌 getters로 선언하게 됨!

 

-스크립트 안에서 처리하기! 깔끔하게 computed 속성활용하기

===todolist.vue파일에서 methods에 computed를 추가===
    computed: {
      todoItem(){
        return this.$store.getters.stroeTodoItems;
      }
    }

 

5.mapGetters로 리팩토링

-mapGetters를 사용하기 위해선 <script>태그 안에 import하기

import { mapGeeters } from 'vuex'

 

-computed안에 ...mapGetters추가

    computed: {
       ...mapGetters(['storedTodoItems'])
  }

 

-상단의 태그도 변경

그래야기 아래의 computed의 storedTodoItems로 간단하게 코드를 짤 수 있음

<li v-for="(todoItem, index) in this.storedTodoItems" v-bind:key="todoItem.item" class="shadow">

 

5.mapMutations란?

vuex의 mutations 속성을 뷰에 쉽게 연결 가능

===app.vue파일에서 vuex선언 및 methods에서 ...mapMutations사용===

import { mapMutations } from 'vuex'

methods:{
	...mapMutations(['summitInfo']),
    변경 내용 어쩌고 저쩌고
}

===store.js에서 mutations 정의===
mutations:{
	summitInfo(state){
    	alert (state.msg)
    }
}

-==사용할 vue파일에서===
"summitInfo"만 입력하면 됨!

 

6.mapActions의 문법

Vuex에 선언한 actions속성을 콤포넌트에 연결

===app.vue파일에서 vuex선언 및 methods에서 ...mapActions사용===

import { mapActions } from 'vuex'

methods:{
	...mapActions(['summitInfo']),
    변경 내용 어쩌고 저쩌고
}

===store.js에서 mutations 정의===
actions:{
	summitInfo(context){
    	setTimmer(() => context.commit('clickBrn'),3000);
    }
}

-==사용할 vue파일에서===
"ssummitInfo"만 입력하면 됨!

 

7.리팩토링: todolist.vue 에서 import {mapMutations} 선언하기!
=> 기존에 mapStates 등 쓰고 있었다면 콤마, 후 그대로 이어서 사용하면 된다! 매우간편!

 

import { mapGetters,mapMutations } from 'vuex'

 

-기존에는 this.$store.commit();을 사용하는데,

methods에서 바로 ...mapMutations를 사용할수 있음!

===>객체처럼 메소드를 사용할 수 있음! 'removeOneItem' 처럼!

    ...mapMutations({
      removeTodo : 'removeOneItem'
    })

 

===>기존에 태그에서 removeTodo로 인자를  todoItem과 index둘다를

받아오기 떄문에 mapMutations에서는 따로 인자설정 필요없음!

<span class="removeBtn" v-on:click="removeTodo(todoItem, index)">삭제</span>

다만, 인자를 두개로 인지하기 떄문에 {}를 사용해서 하나로 묶어줘야함!

  <span class="removeBtn" v-on:click="removeTodo({todoItem, index})">삭제</span>

 

+)같은 방식으로 토글도 변경

 

v-on:click="toggleComplete({todoItem, index})"

(중략)

   ...mapMutations({
      removeTodo : 'removeOneItem',
      toggleComplete : 'toggleOneItem'
    }),

 

 

+같은 방식으로 todoFooter.vue도 변경

 

<script>
import { mapMutations } from 'vuex'

export default {
  methods:{
    ...mapMutations({
      clearTodo: 'clearAllItems'
    })
    //clearTodo(){
     //  this.$emit('clearAll');
     //this.$store.commit('clearAllItems');
    }
  }
  
  
  (후략)

 

8.