Vue.js + Vuex + TypeScriptを使ってTodoListを作る

Vuexを使っての状態管理のやり方をいまいちイメージできていなかったので、実際に動かしながら作ってみた。

環境はvue-cli 3を使って構築しました。

詳しくは公式サイトを参照ください。

環境

node: v10.15.1
npm: 6.8.0
vue: 2.5.22
vuex: 3.0.1
typescript: 3.0.0

成果物のpackage.jsonに環境周りが書いてあるので、ご参考までに

成果物
成果物github

そもそも、vuexって何？

vuexの公式サイトには、こう書かれています。

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。

詳しくは公式サイトに詳しく載っています。

ハマったポイント

1つコンポーネントを作成して、2つ目のコンポーネントを作った時に、片方のコンポーネントしか表示されないなぁって思いました。

原因が、componentsフォルダに入っているコンポーネントファイルたちには、@Componentをつけないと、コンポーネントとして認識してくれない・・・それで少しハマりました。

src/component/TodoList.vue

<template>
    <div>
        <h3>Todo List</h3>
        <ul>
            <li v-for="todo in todos" :key="todo.id">
                <p>ID:{{todo.id}}</p>
                <p>Text:{{todo.text}}</p>
            </li>
        </ul>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import store from "@/stores/toDo";

@Component//←これをつけないと「コンポーネント」として、認識されない・・・
export default class TodoList extends Vue {
    get todos() {
        return store.getters.todos;
    }

}
</script>

少し考えたところ

今回storeファイルをインポートする形式にしたのは、今後ページを増やす際に、store自体のファイルを増やす可能性が高かったので、storesフォルダを作成して、ページごとにファイルを分けることにしました。

まとめ

ある程度vuexの流れがわかってきたので、今度はfirebaseを使って、データベース管理をどういう風にやるかを考えて、実装して、記事にしようと思います。

参考

Vue.jsとVuexでTodoListを作ってみた