実践編 | Vite 環境で Vue 3.0 の CompositionAPI に触れてみる

vue-router も準備したので、ページを作っていこうと思います。

定番の Todo アプリを作っていきましょう。

共通部分

CompositionApi.vue と OptionsApi.vue にそれぞれ処理を記述していきます。

比較するために、テンプレートは同じものにします。

共通テンプレート

<template>
  <div>
    <p></p> <!-- ここにはページ名が入る -->
    <form @submit.prevent="addTodo()">
      <input type="text" v-model="store.text">
    </form>
    
    <ul>
      <template
        v-for="(todo, index) in todos"
        :key="index"
      >
        <li class="list_item">
          <span
            class="list_text"
            :class="{ is_done: todo.done }"
          >
            {{ todo.text }}
          </span>
          <template v-if="!todo.done">
            <button
              @click="finishTodo(index)"
            >
              finish
            </button>
          </template>
        </li>
      </template>
    </ul>
  </div>
</template>

<style>
.list_item {
  display: flex;
  margin-bottom: 10px;
}

.list_text {
  margin-right: 10px;
}

.is_done {
  text-decoration: line-through;
}
</style>

Script の記述

Options API

これまでの Vue.js の記述です。

特筆することはないかなと思います。data と methods を使って最小限の実装を行っています。

<script>
export default {
  name: 'OptionsApi',
  data: () => ({
    todos: [],
    text: ''
  }),
  methods: {
    addTodo() {
      this.todos.push({
        text: this.text,
        done: false
      })
      this.text = ''
    },
    finishTodo(index) {
      this.todos[index].done = true
    }
  }
}
</script>

Composition API

いよいよ Composition API での記述になります。

早速ですがこのようになりました。

<script lang="ts">
import { reactive } from 'vue'

interface Todo {
  text: string,
  done: boolean
}

interface Todos {
  todos: Todo[]
}

export default {
  setup() {
    const todos = reactive<Todo[]>([])
    const store = reactive({
      text: ''
    })
    const addTodo = () => {
      const data: Todo = {
        text: store.text,
        done: false
      }
      todos.push(data)
      store.text = ''
    }
    const finishTodo = (index: number) => {
      todos[index].done = true
    }

    return {
      store,
      todos,
      addTodo,
      finishTodo
    }
  } 
}
</script>

Composition API での記述内容の説明

型定義

まずは Todo の型を決めます。

一つ一つの Todo の型と、Todo をまとめた Array のほうも定義しました。

interface Todo {
  text: string,
  done: boolean
}

interface Todos {
  todos: Todo[]
}

setup 関数

Composition API では setup() で return することでテンプレートでも使用できるデータとなります。

export default  {
  setup() {
    // データや関数を定義
    return {
      // 定義したデータ・関数をreturn する
    }
  }
}

おわり

Vite を使えばサクッと Vue 3 (Composition API) + TypeScript が試せることが分かりました。

Vite 自体がとても動作が軽いのと、ディレクトリ構造が複雑ではないこともあってお手軽に試すのにぴったりだと思います。