Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

Nuxt.js使ってみた Part3 ~小ネタ:Vuexとは?編~

はじめに

お久しぶり?です、筆者です。

前回はNuxt.jsのチュートリアルを実施し、さらにそのチュートリアルで作成したコードのカスタマイズを行いました。
そして…カスタマイズを行っていく中で、下記のことが気になり深掘りしたので…:

  • Vuexとは?
  • computedとmethodsの違い
  • propsとdataの違い

今回では、上記の内「Vuexとは?」についてを見ていこうかなと。

それでは行きましょう。

Vuexとは

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。
これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
また Vue 公式の開発ツール拡張と連携し、設定なしでタイムトラベルデバッグやステートのスナップショットのエクスポートやインポートのような高度な機能を提供します。

参考: Vuex とは何か? | Vuex

Vuexとは平たく言うと「アプリケーションの状態を管理するライブラリ」…と言った形です。

使い方としては…。
ログイン機構があるアプリケーションにて「現在ログイン中かどうか」をVuexを使って判断する、と言った形でしょうか。

こちらの記事も読むとより理解が深まるかも…。
qiita.com

最大のメリットは、VuexはVue.jsのコンポーネントシステムから切り離されていることです。
このため、どのコンポーネントから参照しても、常に同じ状態を取得可能です

例えば、今回のチュートリアルコードのように「単一のコンポーネントで全てのデータ管理を行う」様なアプリケーションであればあまり恩恵はうけとれませんが…。

今回のアレンジ後のアプリケーション…具体的には、こういう構造の物を:

<!-- Index.vueコンポーネント -->
<template>
 ... 省略
  <tr v-for="(item, index) in todos" :key="index">
    <td>{{ item.content }}</td>
    <td>{{ item.created }}</td>
    <td><button class="button">{{ item.state }}</button></td>
    <td><button class="button button--delete">削除</button></td>
  </tr>
 ... 省略
</template>

…こういう感じにするように:

<!-- Index.vueコンポーネント -->
<template>
 ... 省略
  <section v-for="(item, index) in display_todos" :key="index">
    <Task
      :task="item"></Task>
  </section>
 ... 省略
</template>

Index.vueコンポーネントが参照するdisplay_todosと同じデータを「Taskコンポーネントからも参照しなければならない」場合の様な…。
「親コンポーネントと子コンポーネントが同一のデータを参照して振る舞いを変える」システムだと、Vuexでデータを構成するだけでとてもいい感じに動きます。

もしVuexを使用しない状態だと…。
例えばTaskコンポーネント内部でデータが変更されたらIndex.vueコンポーネントへその情報を伝播させ、データを更新しなければなりませんからね。

Vuexだと、下記の様にthis.$store.commitを使う事でデータの変更を反映できるので便利です。

  methods: {
    /**
     * 要素を削除する。
     */
    remove: function() {
      this.$store.commit('remove', this.task)
    },
    /**
     * 要素のステータスを変更する。
     */
    changeState: function(){
      this.$store.commit('changeState', this.task)
    },
  },

システム開発をしていると、画面単位では違うデータを見にいく設計(ユーザー一覧画面=ユーザーデータ、タスク一覧画面=タスクデータの様に)にはなりやすいですが…。
コンポーネント単位で違うデータを見にいく設計にはなりずらいでしょうからね。

特にVue.jsだと、「複数のコンポーネントが組み合わさって1つの画面を構成する」様な設計にすることも多いでしょうし。
そういう時に、Vuexは大活躍しそうです。

おわりに

今回はチュートリアルで作成したコードのカスタマイズの中で気になった項目3つ:

  • Vuexとは?
  • computedとmethodsの違い
  • propsとdataの違い

…の内、「Vuexとは?」について見ていきました。
次回記事では、2つめの「computedとmethodsの違い」について見て行ければと。

それでは|д゚*)