Vuex

Vuex란?

 

Vue.js의 상태 관리를 위한 패턴

상태관리란 다수의 컴포넌트 사이의 데이터 전달 및 이벤트 통신을 한곳에서 관리하는 것

상태관리를 하면 props,event emit으로 인해 파이프로 사용하는 컴포넌트 수를 줄일 수 있음

상태관리를 하면 데이터 통신을 중장 집중식으로 하기에 데이터를 유기적 관리 및 흐름을 파악하기 쉬움

 

https://vuex.vuejs.org/kr/

 

1. vuex 생성

var store = new Vuex.Store({
  state: { // count라는 state 속성을 추가
    count: 0
  }
})

 

 

2.  state 접근

new Vue({
  el: "#app",
  store: store  // 뷰 인스턴스의 store 속성에 연결
  data : {
  ...
  },
  methods: {
    changeCount: function() {
      this.$store.state.count++;  //this.$store.로  vuex 접근가능
    }
  }
});

 

 

3. Getters

 

저장소의 계산된 속성(컴포넌트의 중복된 코드 간결화 가능)

computed 사용

 

var store = new Vuex.Store({
  state: { 
    count: 1
  },
  getters: {
    multipleCount: function (state) {
      return state.count*3;
    }
  }
})

 

new Vue({
  el: "#app",
  store: store  
  data : {
  ...
  },
  computed: {
    changeCount: function() {
      this.$store.getters.multipleCount;  //getters.메소드명으로   접근가능
    }
  }
});

 

mapGetters로 간결화 가능

new Vue({
  el: "#app",
  store: store  
  data : {
  ...
  },
  computed: Vuex.mapGetters({
      changeCount: 'multipleCount'; //컴포넌트의 computed메소드명과 vuex getters메소드명 다를시{}
    })
  ....
  computed: Vuex.mapGetters([
      'multipleCount'; //컴포넌트의 computed메소드명과 vuex getters메소드명이 multipleCount로 같을시[]
    ])
  
});

 

4. Mutations(==setters)

Mutations란 Vuex의 state값을 변경하는 순차적 로직들을 실행

여러 컴포넌트에서 state값 변경시 어느 컴포넌트에서 변경했는지 추적 어려워 명시적으로 순차적 상태변화 수행하는것

인자를 받아 vuex에 줄 수 있으며 computed가 아닌 methods에 등록한다.

동기적 로직을 처리(actions는 비동기적 로직을 처리)

this.$store.commit('메소드명','인자값')로 사용

 

var store = new Vuex.Store({
  state: { 
    count: 1
  },
  mutations: {
    modifyCount: function (state,payload) {
      return state.count=payload.value;
    }
  }
})

new Vue({
  el: "#app",
  store: store  // 뷰 인스턴스의 store 속성에 연결
  data : {
  ...
  },
  methods: {
    changeCount:function (){
    this.$store.commit('modifyCount',100);  //this.$store.commit('메소드명','인자값')로 사용
    //this.$store.commit('modifyCount', {
  	//	value: 100,
 	// 	arr: ["A", "B", "C"]
	//});
    }
  } 
});

 

 

mapMutations로 코드 가독성 높임

 

new Vue({
  el: "#app",
  store: store  
  data : {
  ...
  },
  methods: Vuex.mapMutations({
      changeCount: 'modifyCount'; //컴포넌트의 methods명과 vuex mutations 메소드명 다를시{}
    })
  ....
   methods: Vuex.mapMutations([
      'modifyCount'; //컴포넌트의 methods명과 vuex mutations 메소드명이 multipleCount로 같을시[]
    ])
  
});

 

5. Actions

Actions란 Vuex의 state값을 변경하는 비동기 로직들을 실행

Actions란 Mutations를  호출 실행

this.$store.dispatch('메소드명','인자값')로 사용->actions ->mutations 호출

비동기적 로직을 처리(mutations는 동기적 로직을 처리)

인자를 받아 vuex에 줄 수 있으며 computed가 아닌 methods에 등록한다.

 

 

ex) setTimeout()이나 http 통신처리 결과 사용시는 actions 사용

 

var store = new Vuex.Store({
  state: { 
    count: 1
  },
  mutations: {
    modifyCount: function (state,payload) {
      return state.count*payload;
    }
  },
  actions:{
    increase: function (context) {
     return setTimeout(function () {
       context.commit('modifyCount', payload.num);
     }, payload.duration);
    }
  }
})

 

new Vue({
  el: "#app",
  store: store  // 뷰 인스턴스의 store 속성에 연결
  data : {
  ...
  },
  methods: {
    changeCount:function (){ //this.$store.dispatch('메소드명')로 사용
    this.$store.dispatch('increase',{ num: 50, duration: 300 });  
    }
  } 
});

 

 

mapActions로 코드 가독성 높임

new Vue({
  el: "#app",
  store: store  
  data : {
  ...
  },
  methods: Vuex.mapActions({
      changeCount: 'increase'; //컴포넌트의 methods명과 vuex actions 메소드명 다를시{}
    })
  ....
   methods: Vuex.mapActions([
      'increase'; //컴포넌트의 methods명과 vuex actions 메소드명이 multipleCount로 같을시[]
    ])
  
});