2021-12-14 (Vue.js - vuex)

1. Vuex 란?

•  Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리
• 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
• React의 Flux 패턴에서 기인함
• Vue.js 중고급 개발자로 성장하기 위한 필수 관문

2. Vuex 상태관리 패턴

• state : 컴포넌트 간에 공유할 data
• view : 데이터가 표현될 template
• actions : 사용자의 입력에 따라 반응할 methods

new Vue({
  // state
  data() {
    return {
      counter: 0
    };
  },
  // view
  template: `
    <div>{{ counter }}</div>
  `,
  // actions
  methods: {
    increment() {
      this.counter++;
    }
  }
});

 

 

3. Vuex 구조

• 뷰 컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태
  • 시작점은 Vue Components이다.
  • 컴포넌트에서 비동기 로직(Method를 선언해서 API 콜 하는 부분 등)인 Actions를 콜하고,
  • Actions는 비동기 로직만 처리할 뿐 State(Data)를 직접 변경하진 않는다.
  • Actions가 동기 로직인 Mutations를 호출해서 State(Data)를 변경한다.
  • Mutations에서만 State(Data)를 변경할 수 있다.

 

참고사이트

https://vuex.vuejs.org/kr/
https://ict-nroo.tistory.com/106 [개발자의 기록습관]

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