🧩 Vue 2로 배우는 프론트엔드 기초

1. store/modules/todo.js 생성

// store/modules/todo.js
import axios from '@/utils/axios';

const state = {
  todos: [],
};

const getters = {
  allTodos: (state) => state.todos,
};

const mutations = {
  setTodos(state, todos) {
    state.todos = todos;
  },
  addTodo(state, todo) {
    state.todos.unshift(todo);
  },
  removeTodo(state, id) {
    state.todos = state.todos.filter((t) => t.id !== id);
  },
  updateTodo(state, updated) {
    state.todos = state.todos.map((todo) =>
      todo.id === updated.id ? updated : todo
    );
  },
};

const actions = {
  async fetchTodos({ commit }) {
    const res = await axios.get('/api/todos');
    commit('setTodos', res.data);
  },
  async addTodo({ commit }, title) {
    const res = await axios.post('/api/todos', { title, completed: false });
    commit('addTodo', res.data);
  },
  async deleteTodo({ commit }, id) {
    await axios.delete(`/api/todos/${id}`);
    commit('removeTodo', id);
  },
  async toggleTodo({ commit, state }, id) {
    const target = state.todos.find((t) => t.id === id);
    if (!target) return;
    const updated = { ...target, completed: !target.completed };
    await axios.put(`/api/todos/${id}`, { completed: updated.completed });
    commit('updateTodo', updated);
  },
  async updateTodo({ commit }, { id, title }) {
    await axios.put(`/api/todos/${id}`, { title });
    commit('updateTodo', { id, title });
  },
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};

2. store/index.js에 등록

import Vue from 'vue';
import Vuex from 'vuex';
import auth from './modules/auth';
import theme from './modules/theme';
import todo from './modules/todo'; // ✅ 추가

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    auth,
    theme,
    todo, // ✅ 등록
  },
});

3. TodoApp.vue 수정

<template>
  <div class="todo-container">
    <h2>🧾 할 일 관리 (Vuex)</h2>
    <div class="form">
      <input v-model="newTodo" placeholder="할 일을 입력하세요" />
      <button @click="handleAdd">추가</button>
    </div>
    <ul class="todo-list">
      <TodoItem
        v-for="todo in allTodos"
        :key="todo.id"
        :content="todo.title"
        :completed="todo.completed"
        :editing="editingId === todo.id"
        @delete="handleDelete(todo.id)"
        @edit="startEdit(todo.id)"
        @update="handleUpdate(todo.id, $event)"
        @toggle="handleToggle(todo.id)"
      />
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import TodoItem from './TodoItem.vue';

export default {
  components: { TodoItem },
  data() {
    return {
      newTodo: '',
      editingId: null,
    };
  },
  computed: {
    ...mapGetters('todo', ['allTodos']),
  },
  mounted() {
    this.fetchTodos();
  },
  methods: {
    ...mapActions('todo', [
      'fetchTodos',
      'addTodo',
      'deleteTodo',
      'updateTodo',
      'toggleTodo',
    ]),
    async handleAdd() {
      if (!this.newTodo.trim()) return;
      await this.addTodo(this.newTodo);
      this.newTodo = '';
    },
    async handleDelete(id) {
      await this.deleteTodo(id);
    },
    startEdit(id) {
      this.editingId = id;
    },
    async handleUpdate(id, newTitle) {
      if (newTitle !== null && newTitle.trim()) {
        await this.updateTodo({ id, title: newTitle });
      }
      this.editingId = null;
    },
    async handleToggle(id) {
      await this.toggleTodo(id);
    },
  },
};
</script>

이제 모든 Todo 관련 상태와 로직은 Vuex로 관리되고, 컴포넌트는 오로지 데이터 표현에 집중할 수 있습니다.

FE 저장소

GitHub - heroyooi/vue2-app at ch24