Vuex, To-Do List

vue.js 애플리케이션의 상태 관리 패턴 및 라이브러리

상태 관리를 위해 중앙 집중식 저장소를 제공하여 컴포넌트 간의 데이터 공유와 효율적인 상태관리를 할 수 있음

 

주요 개념

1. State :

애플리케이션의 상태를 저장하는 중앙 저장소

컴포넌트 간의 공유되는 데이터 포함

2. Getters :

저장소의 상태에 대한 계산된 속성

저장소의 데이터를 가져와서 조작하거나 계산하는데 사용

3. Mutations :

저장소의 상태를 변경하는 메소드

동기적으로 상태를 변경

컴포넌트에서 Mutation를 호출하여 저장소의 상태를 갱신

4. Actions : 

비동기적인 작업이나 복잡한 동작을 수행할 때 사용

비동기적으로 Mutations를 호출하거나 다른 Actions를 실행하여 상태를 변경

5. Modules

큰 규모의 애플리케이션에서 코드를 모듈화하는데 사용

Modules를 사용하면 저장소를 모듈로 나누어 관리하고 각 모듈마다 별도의 상태, Mutations, Actions, Getters를 가질 수 있음

 

State

프로젝트에서 공통으로 사용할 변수를 정의

프로젝트 내의 모든 곳에서 참조 사용 가능

state를 통해 각 컴포넌트에서 동일한 값 사용 가능

 

App.vue

<template>
  <Title name="TO-DO" />
  <ToDoInput />
  <ToDoList />

  <div v-for="data in dataJson" :key="data.id">
    <div><input type="checkbox" />{{ data.todo }}</div>
  </div>
</template>

<script>
import Title from "./components/Title.vue";
import ToDoInput from "./components/ToDoInput.vue";
import ToDoList from "./components/ToDoList.vue";
import jsonData from "./data/ToDoListData.json"; // json 파일 가져오는 방법

export default {
  name: "App",
  components: {
    Title,
    ToDoInput,
    ToDoList,
  },
  data() {
    return {
      dataJson: jsonData, // json 파일에 저장되어있는 데이터를 dataJson으로 저장
    };
  },
  methods: {},
};
</script>

ToDoInput.vue

<template>
  <div id="todoinput">
    <input type="text" v-model="content" @keyup.enter="addTodo" />
    <button type="button" @click="addTodo">제출</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: "",
      id: "",
    };
  },
  methods: {
    addTodo() {
      this.id = Date.now(); // content 입력 시 id는 현재 시간을 넣음
      this.$store.commit({
        //commit store.js의 addToDo 함수 호출
        type: "addTodo", // 함수 이름
        id: Date.now(),
        content: this.content,
      });
      this.content = ""; // 빈 값으로 초기화
    },
  },
};
</script>

ToDoList.vue

<template>
  <div class="todolist">
    <div id="container" v-for="data in todos" :key="data.id">
      <input type="checkbox" />{{ data.content }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    todos() {
      // todos는 변수임
      {
        // vuex store에 저장되어있는 todos를 가져오기
        return this.$store.state.todos;
      }
    },
  },
};
</script>

computed 속성

데이터 속성을 기반으로 계산된 값을 반환하는데 사용

Vue 인스턴스의 데이터 속성을 읽고, 그 값을 기반으로 계산된 값을 반환하며, 해당 데이터 속성이 변경될 때 자동으로 재계산

Store.js

import { createStore } from "vuex";

const store = createStore({
  state() {
    // store 변수 설정
    return {
      todos: [],
    };
  },
  mutations: {
    addTodo(state, payload) {
      //ToDoInput.vue에서 commit으로 보내줬기 때문에 payload로 받아야 함. 개인 인자로 넘겨줄 때는 state.()를 사용
      state.todos.push(payload); // todos 배열에 payload {type: 'addTodo', id: '', content: ''} 저장
    },
  },
});

export default store;

mutations

• state를 변경시키는 역할
• mutations을 통해서만 state를 변경시켜야 함
• 동기 처리
• commit ('함수명', '전달인자')로 실행 가능

mutations 내 함수 인자

addTodo(state, payload)

addTodo(state, (id, content))

기본 인자는 state만 사용 가능

 

ToDoListData.json

[
  {
    "id": "1",
    "todo": "test1"
  },
  {
    "id": "2",
    "todo": "test2"
  },
  {
    "id": "3",
    "todo": "test3"
  }
]

 

설치

npm i vuex

vuex document 주소

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