todo store 적용 3 : 컴포넌트에 store 연동

• TodoList

<script>
import TodoItem from './TodoItem.svelte'
import { fetchTodos } from '../store'
import { fade, fly } from 'svelte/transition'
import { flip } from 'svelte/animate'
</script>

<div class="main">
  <ul>
    {#each $fetchTodos as todo, index(todo.id)}
      <li
        in:fade
        out:fade="{{duration: 100}}"
        animate:flip="{{duration: 1000}}"
        >      
        <TodoItem {todo} />
      </li>
    {/each}
  </ul>
</div>

• TodoItem

<script>
import { todos } from '../store'

export let todo

const handleCheckTodo = () => todos.checkTodo(todo.id)
const handleChangeTodoEditMode = () => todos.changeTodoEditMode(todo.id)
const handleEditTodo = () => {
  todos.editTodo(todo)
  todos.closeTodoEditMode()
}

const handleRemoveTodo = () => todos.removeTodo(todo.id)

</script>

<input type="checkbox" bind:checked={todo.done} on:click={handleCheckTodo} />
{#if $todos.editMode === todo.id }
  <input type="text" bind:value={todo.content} on:focusout={handleEditTodo} >
{:else}
  <span on:dblclick={handleChangeTodoEditMode}>{todo.content}</span>
{/if}
<a href="#null" on:click={handleRemoveTodo} >X</a>

• TodoHeader.svelte

<script>
import { todoForm, todos } from '../store'

const handleTodoAdd = (e) => {
  if(e.keyCode === 13) {
    todos.addTodo($todoForm)
  }
}
</script>

<header>
  <div class="wrap">
    <h1>SVELTE TODO</h1>
    <input type="text" bind:value={$todoForm} on:keyup={handleTodoAdd} >  
  </div>
</header>

• TodoInfos.svlete

<script>
import { todos, countTodo } from '../store'
import Constant from '../constant'

const handleFetchTodoALL = () => todos.changeTodoView(Constant.ALL)
const handleFetchTodoActive = () => todos.changeTodoView(Constant.ACTIVE)
const handleFetchTodoDone = () => todos.changeTodoView(Constant.DONE)

</script>

<div class="info">
  <div class="wrap">
    <span>COUNT: {$countTodo}</span>
    <div>
      <button class:selected={$todos.viewMode === Constant.ALL} class="btn" on:click={handleFetchTodoALL} >ALL</button>
      <button class:selected={$todos.viewMode === Constant.ACTIVE} class="btn" on:click={handleFetchTodoActive} >ACTIVE</button>
      <button class:selected={$todos.viewMode === Constant.DONE} class="btn" on:click={handleFetchTodoDone} >DONE</button>
    </div>  
  </div>
</div>

<style>
.selected {
  border-bottom: 2px solid #005EFF;
}
</style>

[만들면서 배우는 Svelte]

만들면서 배우는 svelte