[vue.js] 예제 Todo App 만들기 with nuxt 1

nuxt를 학습한 후 Todo App을 만들었다. 이전과 다르게 라우터를 사용하기 위해서 List와 Create 페이지를 분리했다.

 

가장 먼저 네비게이션 바 컴포넌트를 만들었다. 컴포넌트 옵션에 name 지정하지 않으면 그 컴포넌트를 가져오는 곳에 이름이 kebab-case 변환돼서 사용할 수 있다.

 

// NavBar.vue
<template>
  <div>
    <nav>
      <nuxt-link to="/">List</nuxt-link> |
      <nuxt-link to="/todos/create">Create</nuxt-link>
    </nav>
  </div>
</template>


// index.vue
<template>
  <div id="app">
    <navi-bar /> // kebab-case
    <nuxt />
  </div>
</template>

<script>
import NaviBar from '~/components/NavBar'

export default {
  components: {
    NaviBar
  }
}
</script>

 

그리고 기존에 store를 가져와서 약간만 수정했다. 모듈 방식으로 스토어를 사용하도록 아래와 같이 변경하였다. store 내부 구조를 파악해서 알아서 모듈 방식으로 변경해 준다. 특이한 점은 기존은 state를 JSON으로 반환했는데 함수를 반환한다. Singleton 으로 상태를 같은 값으로 반환해주기 위해서라고 하는데 정확한 이유는 좀 더 찾아봐야겠다. 🧐

 

export const state = () => ({
  todos: [],
  visibility: 'all',
  selectedTodo: null
})

export const mutations = {
  ADD_TODO (state, todo) {
    state.todos.push(todo)
  },
  REMOVE_TODO (state, id) {
    state.todos = state.todos.filter(todo => todo.id !== id)
  },
  EDIT_TODO (state, text) {
    state.selectedTodo.text = text
    const findIndex = state.todos.findIndex(
      todo => todo.id === state.selectedTodo.id
    )
    state.todos.splice(findIndex, 1, state.selectedTodo)
    state.selectedTodo = null
  },
  TOGGLE_TODO (state, id) {
    const todo = state.todos.find(todo => todo.id === id)
    todo.completed = !todo.completed
  },
  REMOVE_COMPLETED_TODO (state) {
    state.todos = state.todos.filter(todo => !todo.completed)
  },
  UPDATE_VISIBILITY (state, visibility) {
    state.visibility = visibility
  },
  SET_EDIT_TODO (state, todo) {
    state.selectedTodo = todo
  }
}

export const actions = {
  createTodo ({ commit }, text) {
    commit('ADD_TODO', {
      id: `todo-${Date.now()}`,
      text,
      completed: false
    })
  },
  removeTodo ({ commit }, id) {
    commit('REMOVE_TODO', id)
  },
  toggleTodo ({ commit }, id) {
    commit('TOGGLE_TODO', id)
  },
  editTodo ({ commit }, text) {
    commit('EDIT_TODO', text)
  },
  removeCompletedTodo ({ commit }) {
    commit('REMOVE_COMPLETED_TODO')
  },
  updateVisibility ({ commit }, visibility) {
    commit('UPDATE_VISIBILITY', visibility)
  },
  setTodo ({ commit }, todo) {
    commit('SET_EDIT_TODO', todo)
  }
}
export const getters = {
  getFilteredTodos (state) {
    const { visibility } = state
    if (visibility === 'active') {
      return state.todos.filter(todo => !todo.completed)
    } else if (visibility === 'completed') {
      return state.todos.filter(todo => todo.completed)
    } else {
      return state.todos
    }
  },
  todo (state, id) {
    return state.todos.finde(todo => todo.id === id)
  },
  completedCount (state) {
    return state.todos.filter(todo => todo.completed).length
  }
}

 

눈여겨봐야 할 부분은 pages 폴더이다. 해당 폴더 구조에 따라 라우터가 생성된다. 빌드하면 오른쪽처럼 변경된다.

 

 

할 일을 추가한 후에 목록 페이지로 자동 변경되는 기능을 넣었는데 this.$router.push를 활용했다.

 

완성된 화면은 아래와 같다. 

 

할일 목록, 할일 추가, 할일 보기

할일 목록 완료, 남은일 목록 보여주는 코드는 다음 시간에 작성할 예정이다.

 

 

도움이 되셨다면 공감 ❤️부탁드려요.