Vuex

 

<Do it! Vue.js 입문>을 기본으로 배운 내용입니다.

 

목차

• 1. 상태 관리
  

• 2. Vuex
  

• 3. state
  

• 4. Getters & Mutations
  

• 5. Actions
  

• 6. Vuex 헬퍼 함수 (mapGetters, mapMutations, mapActions )

 

참고한 사이트

joshua1988.github.io/web-development/vuejs/vuex-start/

joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/

joshua1988.github.io/web-development/vuejs/vuex-actions-modules/

 

---

1. 상태 관리

1-1) 상태 관리 

상태 관리란 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴을 의미한다.

프레임워크	사용하는 상태 관리 라이브러리
React	Redux/ Mobx
Vue	Vuex

 

1-2) 상태 관리 패턴

• 상태 : 앱을 작동하는 원본 소스
• 뷰 : 상태의 선언적 매핑
• 액션 : 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법

 

 

 

 

new Vue({
  // 상태
  data () {
    return {
      count: 0
    }
  },
  // 뷰
  template: `
    <div>{{ count }}</div>
  `,
  // 액션
  methods: {
    increment () {
      this.count++
    }
  }
})

 

1-3) 상태 관리로 해결할 수 있는 문제점

앱의 규모가 커지면서 생기는 문제점들은 아래 2가지로 나눌 수 있다.

1. 여러 뷰가 같은 상태에 의존하는 경우 => 지나치게 중첩된 컴포넌트를 통과하는 prop는 장황할 수 있으며 형제 컴포넌트에서는 작동하지 않는다. 
2. 서로 다른 뷰의 작업이 동일한 상태를 반영해야 하는 경우 => 직접 부모/자식 인스턴스를 참조하거나 이벤트를 통해 상태의 여러 복사본을 변경 및 동기화 하려는 등의 해결 방법을 사용해야 한다. 이러한 패턴은 모두 부서지기 쉽고 유지보수가 불가능하다.

 

---

2. Vuex

• Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리
• 다른 상태 관리 패턴이나 라이브러리와 비교했을 때 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트 한다는 차이점이 있다.
• 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.

※ 중대형 규모의 SPA를 구축하는 경우가 아니고, 앱이 단순하다면 Vuex없이 간단한 글로벌 이벤트 버스 (opens new window)만으로도 상태관리가 가능하다!

 

2-1) Vuex 설치 및 등록

아래 명령어로 프로젝트에 vuex를 설치한다.

$ npm install vuex

그리고 store폴더안에 index.js파일을 생성해 vuex를 등록한다.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  // ...
});

마지막으로 프로젝트의 main.js파일에 store>index.js 파일을 불러와 등록한다.

import store from './store'   //store.js를 불러오는 코드

new Vue({
  el: '#app',
  store,  //추가!!
  components: { App },
  template: '<App/>'
})

 

---

3. state

3-1) state 등록

// store.js (Vuex)
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  // state 추가
  state: {
    counter: 0
  }
});

 

3-2) state 접근

// App.vue
computed: {
  doubleCounter() {
    return this.$store.state.counter * 2;
  }
},

// Child.vue
computed: {
  doubleCounter() {
    return this.$store.state.counter * 2;
  }
},

 

---

4. Getters & Mutations

위 코드는 여러 컴포넌트에서 같은 로직을 비효율적으로 중복 사용하고 있다. 이를 Vuex의 state변경을 각 컴포넌트에서 수행하지 않고, vuex에서 getters 또는 mutations를 이용하여 수행하도록 하고 각 컴포넌트에서 수행 로직을 호출하면 효율적이다.

공통점	getters, mutations, (+actions) 모두 state 값을 변경하는 로직들임
차이점	- mutations는 인자를 받아 vuex에 넘겨줄 수 있다. - getters는 comuted에 등록하고, mutations는methodes에 등록한다.

 

4-1) getters 등록과 사용

// store.js (Vuex)
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    counter: 0
  }
  // getters 추가
  getters: {
    getCounter: function (state) {
      return state.counter;
    },
    doubleCounter: function (state) {
      return state.counter * 2;
    }
  },
});

 

// App.vue
computed: {
  parentCounter() {
    this.$store.getters.getCounter;
  }
},

// Child.vue
computed: {
  childCounter() {
    this.$store.getters.getCounter;
  }
},

 

4-2) mutations 등록과 사용

// store.js (Vuex)
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    counter: 0
  }
  // mutations 추가
  mutations: {
    addCounter: function (state, payload) {
      return state.counter++;
    }
  }
});

// App.vue
methods: {
  addCounter() {
    // this.$store.state.counter++;
    this.$store.commit('addCounter');
  }
},

각 컴포넌트에서  Vuex 의 state 를 조작하는데 필요한 특정 값들을 넘기고 싶을 때는 commit() 에 두 번째 인자를 추가해 값을 넘길 수 있다.

this.$store.commit('addCounter', 10);
this.$store.commit('addCounter', {
  value: 10,
  arr: ["a", "b", "c"]
});

mutations: {
  // payload 가 { value : 10 } 일 경우
  addCounter: function (state, payload) {
    state.counter = payload.value;
  }
}

 

---

5. Actions

• Mutations 에는 순차적인 로직들만 선언하고 Actions 에는 비 순차적 또는 비동기 처리 로직들을 선언한다.
• setTimeout() 이나 서버와의 http 통신 처리 같이 결과를 받아올 타이밍이 예측되지 않은 로직은 Actions 에 선언한다.

 

5-1) actions 등록

// store.js
export const store = new Vuex.Store({
  actions: {
    getServerData: function (context) {
      return axios.get("sample.json").then(function() {
        // ...
      });
    },
    delayFewMinutes: function (context) {
      return setTimeout(function () {
        commit('addCounter');
      }, 1000);
    }
  }
});

 

5-2) actions 사용

actions 를 호출할 때는 아래와 같이 dispatch() 를 이용한다.

// App.vue
methods: {
  addCounter() {
    this.$store.dispatch('addCounter');
  }
},

 

5-3) actions에 인자 값 넘기기

<!-- by 와 duration 등의 여러 인자 값을 넘길 경우, 객체안에 key - value 형태로 여러 값을 넘길 수 있다 -->
<button @click="asyncIncrement({ by: 50, duration: 500 })">Increment</button>

export const store = new Vuex.Store({
  actions: {
    // payload 는 일반적으로 사용하는 인자 명
    asyncIncrement: function (context, payload) {
      return setTimeout(function () {
        context.commit('increment', payload.by);
      }, payload.duration);
    }
  }
})

 

---

6. Map 헬퍼

자세하게 설명된 사이트

Vuex 에 내장된 helper 함수로 이미 위에서 한번 가독성이 올라간 코드를 더 직관적이게 작성할 수 있다.

• mapState
• mapGetters
• mapMutations
• mapActions

// 사용 방법 1
...mapState(['books', 'cart'])

// 사용 방법 2
...mapMutations({
  changeBooks: 'setBooks'
})

// 사용 방법 3
...mapGetters({
  CartItemsCount: state => state.cart.length
})

ex)

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

export default {
  computed: {
    ...mapState(['books']),
    ...mapGetters(['checkOutOfStock']),
  },
  methods: {
    ...mapActions(['fetchBooks', 'addBookToCart']),
    ...mapMutations({changeBooks: 'setBooks'})
  },
}