[Vue] 상태 관리 패턴

상태 관리 구성 요소

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

  

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

• 단방향 흐름 처리

View → Actions → State → View → Actions → State → ...