[Vue.js] 조회기능구현

    키와 밸류 데이터 저장하기

 

템플릿 기본뼈대 순서

template > div > header, main

 

 

App.vue

<template>
  <div>
    <header>
      <h1>Vue 할 일 관리 with TypeScript</h1>
    </header>
    <main>
      <todo-input
        :todoitem="todoText"
        @input="updateTodoText"
        @add="addTodoItem"
      ></todo-input>
      <div>
        <ul>
          <li>아이템 1</li>
          <li>아이템 2</li>
          <li>아이템 3</li>
        </ul>
      </div>
    </main>
  </div>
</template>

대충 우리가 만들어 볼 것의 큰그림

div > ul > li 

근데 이거 컴포넌트로 만들어볼까요? TodoListItem.vue

<template>
  <div>
    <li>아이템 깜장발 배고파 배고파 ㄱ배곶댜ㅏㄱ솔ㅈ댜ㅕㅓ</li>
  </div>
</template>

이걸 App.vue에 넣어보세요

 

    로컬스토리지의 데이터를 꺼내서 todo-list-item에 연결하기 

인풋에서 로컬스토리지에 추가한 데이터를 조회해봅시다~ 이게 가능한가?

 

와 근데 다시보니까 이해가 확 된다!

value는 todoText에서 따오고

localStorage.setItem(todoText, todoText); 아녀~

this.initTodoText();는 추가버튼 눌렀을 때 텍스트 클리어

 

const STORAGE_KEY = "vue-todo-ts-v1";
const storage = {
  fetch() {
    const todoItems = localStorage.getItem(STORAGE_KEY) || [];
    const result = JSON.parse(todoItems);
    return result;
  },
};

fetch() 라는 메서드를 정의하면서 type에러가 납니다. 근데 그냥 [ ]에 코테이션 붙여주면 된다.

 

fetch()라는 우리가 방금 만든 조회 API를 사용해서 todoItems를 다 들고오면 됩니다.

어떻게 들고 오는지 알려드리겠습니다.

 

 

storage 안에 save()라는 API를 넣어보자

 

 

save()는 value를 string으로 받을 거구요. 여기에서 들어온 값을 가지고ㅓ 

 

const STORAGE_KEY = "vue-todo-ts-v1";
const storage = {
  save(value: string) {
    localStorage.setItem(①STORAGE_KEY, "[]");
  },
  fetch() {
    const todoItems = localStorage.getItem(STORAGE_KEY) || "[]";
    const result = JSON.parse(todoItems);
    return result;
  },
};

getItem(STORAGE_KEY)가 갖고 있는 것은 하나의 item이 아니라 '배열'이다.

setItem()이 할 것은 key:value의 배열을 계속 업데이트 할 겁니다.

①setItem(키, 배열)

 

  methods: {
    addTodoItem() {
      const value = this.todoText;
      localStorage.setItem(value, value);
      this.initTodoText();
    },

storage = {

  save(value: string)

 

스토리지에서 세이브를 할 때 value가 되는 것

▲ addTodoItem()에 들어있는 value=todoText는 ▼storage에서 사용된다.

 

    addTodoItem() {
      const value = this.todoText;
      storage.save.push(value);
      
      //삭제 localStorage.setItem(value, value);
      this.initTodoText();
    },

    저장한 데이터를 들고와서 todo-list-item에 표시하기

 

 

App.vue

 <div>
   <ul>
     <todo-list-item
      v-for="(todoItem, index) in todoItems"
      :key="index"
      :todoItem="todoItem">
     </todo-list-item>
   </ul>
</div>

TodoListItem.vue

<template>
  <div>
    <li>
      {{ todoItem }}
    </li>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: {
    todoItem: {
      type: String,
    },
  },
});
</script>