[Vue2] Vue Vuex 준비 및 설치

Vuex란?

• Vue.js 애플리케이션의 상태 관리를 위한 공식 상태 관리 패턴 및 라이브러리입니다.
• React의 Flux 패턴에서 기인함

Vuex의 목적?

• 중앙 집중화된 상태 관리

Vuex는 애플리케이션의 상태를 중앙 집중화하여 관리합니다. 모든 컴포넌트에서 동일한 상태에 접근할 수 있으므로 데이터의 일관성과 예측 가능성이 향상됩니다.

• 상태 공유

여러 컴포넌트 간에 상태를 공유해야 할 때 Vuex는 효과적인 솔루션을 제공합니다. 상태를 공유하고 업데이트하는 로직을 중앙에서 처리하므로 컴포넌트 간의 통신과 동기화가 간단해집니다.

• 복잡한 상태 관리

애플리케이션이 복잡해지고 상태 변경 로직이 복잡해질 때 Vuex는 좋은 선택입니다. 비동기 작업, 조건부 상태 변경, 상태 감시 등을 처리할 수 있는 기능을 제공합니다.

• 개발자 경험 향상

Vuex는 개발자에게 디버깅 도구와 함께 상태 변이 추적, 시간 여행 디버깅 등의 기능을 제공하여 개발자의 작업을 용이하게 합니다. 또한 Vuex의 단방향 데이터 흐름은 애플리케이션의 구조를 명확하게 유지하고 유지보수를 용이하게 합니다.

• 확장성

Vuex는 모듈화된 아키텍처를 지원하여 애플리케이션 규모가 커질수록 코드의 구조와 유지보수가 용이해집니다. 모듈은 각각의 상태, 게터, 뮤테이션, 액션을 가지며, 중첩된 모듈 구조도 가능합니다.

VueX 구조?

• State(상태)

Vue의 data와 같음
원본 소스의 역할을 하며, View와 직접적으로 연결되어있는 Model
state는 mutation을 통해서만 변경이 가능
mutation을 통해 state가 변경이 일어나면 반응적으로 View가 업데이트

• Getters(게터)

Vue의 computed와 같음 (계산된 속성)
Getters를 사용하면 상태를 조작하거나 필터링하여 컴포넌트에서 쉽게 접근할 수 있습니다.

• Mutations(뮤테이션)

상태를 변경하기 위한 동기적인 메서드입니다.
뮤테이션은 상태를 변경하는 작업을 정의하고,
컴포넌트에서는 뮤테이션을 호출하여 상태를 업데이트할 수 있습니다.

• Actions(액션)

비동기 작업이 포함된 복잡한 작업을 처리하기 위한 메서드입니다.
액션은 비동기적인 작업을 수행하고, 그 결과로 뮤테이션을 호출하여 상태를 업데이트합니다.

 

순서도

Vuex를 사용하기 전

Vuex를 사용하기 후

 

Vuex를 사용을 하면 관리를 Store를 해서 

 

사용 예제

 

App.vue

<template>
  <div id="app" class="container">
    <h1 class="text-center">Todo App</h1>
    <CompletedTodo :todos="todos" />
    <AddTodo @add-todo="addTodo" />
    <hr>
    <TodoList 
      :todos="todos"
      @toggle-checkbox="toggleCheckbox"
      @click-delete ="deleteTodo"
    />
  </div>
</template>

<script>
import TodoList from '@/components/TodoList.vue';
import AddTodo from '@/components/AddTodo.vue';
import CompletedTodo from '@/components/CompletedTodo.vue';
export default {
  components: {
    TodoList,
    AddTodo,
    CompletedTodo
  },
  data() {
    return {
      // todo 배열
      todos: [ 
        {id:1, text:'buy a car',  checked:false },
        {id:2, text:'play game',  checked:false },
      ],
      todoText:'' // todoText값 빈 값
    }
  },
  methods: {
    // 지우는 함수
    deleteTodo(id) {
      // id가 같으면 지우는 함수
      // const index = this.todos.findIndex(todo => {
      //   return todo.id === id;
      // });
      // this.todos.splice(index,1);
      // filter 함수로 id가 아니면 지우는 것을 함
      this.todos = this.todos.filter(todo => todo.id !== id);
    },
    addTodo(value) {
      this.todos.push({
        id: Math.random(), // id를 랜덤으로 돌림
        text: value, // text는 input의 값임
        checked : false // checked
      }); 
      this.todoText = ''; // input 값 비우기 
    },
    // flase로 된 checkbox를 true로 바꾸기
    toggleCheckbox({id, checked}) { 
      // index 변수는 todos 객체 중에서 todo.id가 id랑 일치하는 경우의 값
      const index = this.todos.findIndex(todo => {
        return todo.id === id;
      });
      this.todos[index].checked = checked; // todos의 id의 checked는 checked임
    }
  }
}
</script>

AddTodo.vue

<template>
    <input 
        v-model="todoText"
        type="text" 
        class="w-100 p-2" 
        placeholder="Type todo"
        @keyup.enter="addTodo"
    >
</template>

<script>
export default {
    data() {
        return {
            todoText: '',
        }
    },
    methods: {
        addTodo(e) {
            console.log(e.target.value)
            this.$emit('add-todo', e.target.value);
        }
    }
}
</script>

<style>

</style>

Todo 추가하는 컴포넌트

TodoComponent.vue

<template>
    <div class="mb-2 d-flex">
        <div>
            <input type="checkbox" :checked="todo.checked" 
        @change="toggleCheckbox">
        </div>
        <!-- todo.checked클래스가 true 이면 text-muted 실행 아니면 '' -->
        <!-- todo.checked클래스가 true 이면 text-decoration : line-throug 실행 아니면 '' -->
        <span class="ml-3 flex-grow-1"
            :class="todo.checked ? 'text-muted' : ''" 
            :style="todo.checked ? 'text-decoration : line-through' : ''"
        >
            {{ todo.text }}
        </span>
            <button
            class="btn btn-danger btn-sm "
            @click="clickDelete"
            >Delete</button>
    </div>
</template>

<script>
export default { 
    // props로 부모 컨테이너 값 가지고 옴.
    props: {
        todo: {
            type: Object, // type object
            required:true // 무조건 값이 필요
        }
    },
    methods: {
        toggleCheckbox(e) {
            // 자손 함수를 부모가 씀.
            this.$emit('toggle-checkbox', {
                id: this.todo.id, // todo.id 보냄
                checked: e.target.checked  // e.target의 checked 여부
            });
        },
        // 클릭하면 지우는 함수
        clickDelete() {
            this.$emit('click-delete', this.todo.id);
        }
    }
}
</script>

<style>

</style>

TodoList.vue

<template>
    <div>
        <TodoComponent 
            v-for="todo in todos" 
            :key="todo.id" 
            :todo="todo"
            @toggle-checkbox="toggleCheckbox"
            @click-delete="deleteTodo"
        />
    </div>
</template>

<script>
import TodoComponent from '@/components/TodoComponent.vue';
export default {
    components: {
        TodoComponent
    },
    props: {
        todos: {
            type: Array,
            required: true
        }
    },
    methods: {
   	 	// 체크박스 토글 함수
        toggleCheckbox(value) {
            this.$emit('toggle-checkbox', value)
        },
        // todo 지우는 함수
        deleteTodo(todoId) {
            this.$emit('click-delete', todoId);
        }
    }
}
</script>

<style>

</style>

Todolist 생기는 컴포넌트

CompletedTodo.vue

<template>
    <div>
        Completed Todo: {{ numberOfCompletedTodo }}
    </div>
</template>

<script>
export default {
    props: {
        todos: {
            type: Array,
            required: true
        }
    },

    computed: {
    	// todo를 checked하면 그 갯수를 보여주는 것
        numberOfCompletedTodo() {
            return this.todos.filter(todo => todo.checked).length;
        }
    }
}
</script>

<style>

</style>

체크하면 숫자가 나오는 카운트

 

참고 영상

1. 코지코더 Vue.js 2 강좌

https://tinyurl.com/4s42cmr2

뷰js 2 (Vue.js 2) 기초 익히기 기본 강좌!