Vue.js でログイン機能を構築する | Vuex チュートリアル

はじめに

このプロジェクトでは、Vue.js と Vuex を使ってログイン機能を構築する方法を学びます。このプロジェクトの目的は、Vue.js コンポーネントと Vuex ベースの状態管理システムの統合を理解することです。

👀 プレビュー

Vue login functionality preview

🎯 タスク

このプロジェクトでは、以下のことを学びます。

プロジェクト構造と各ファイルの役割を理解する方法
ログイン機能の問題点を特定する方法
Vuex ストアと Vue コンポーネントを修正することでログイン機能を修正する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

Vuex を使った Vue.js プロジェクトの構成方法を理解する
Vuex を適用してアプリケーションの状態を管理する
Vue.js アプリケーションのトラブルシューティングと問題の修正
Vuex と Vue.js コンポーネントを統合する

プロジェクト構造を理解する

このステップでは、プロジェクト構造とログイン機能に関与するファイルについて学びます。

プロジェクトのディレクトリ構造は以下の通りです。

├── components
│   ├── login.js
│   └── panel.js
├── css
│   └── style.css
├── index.html
├── lib
│   ├── vue.min.js
│   └── vuex.min.js
└── store
    ├── BaseModule.js
    ├── UserModule.js
    └── index.js

重要なファイルとその役割は以下の通りです。

index.html：これはアプリケーションのエントリーポイントとなるメインの HTML ファイルです。
components/login.js：このファイルにはログインページ用の Vue コンポーネントが含まれています。
components/panel.js：このファイルにはウェルカムパネル用の Vue コンポーネントが含まれています。
store/BaseModule.js：このファイルは基本的な Vuex モジュールを定義しています。
store/UserModule.js：このファイルはユーザー関連のデータとアクション用の Vuex モジュールを定義しています。
store/index.js：このファイルは Vuex モジュールを結合して Vuex ストアを作成します。

WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。初期ページは以下のようになります。

Initial Effect

問題を特定する

問題は、ログイン機能が期待通りに動作しないことです。ユーザー名を入力して「確認」ボタンをクリックすると、データは変更されますが、ログインページが依然として表示され、ウェルカムページが正しく表示されません。

問題を特定するには、store フォルダー内の関連コード、特に UserModule.js ファイルを注意深く読み、Vuex の知識と組み合わせる必要があります。

ログイン機能を修正する

index.html ファイルを開き、<script> タグ内の TODO セクションを探します。
computed セクションで、以下の属性に変更します。
```
computed: {
  welcome() {
    return store.getters.welcome;
  },
  username() {
    return store.getters["user/username"];
  },
  token() {
    return store.getters["user/token"];
  }
},
```
これらのコンピュートドプロパティを使うと、Vuex ストアから必要なデータにアクセスできます。
methods セクションで、login メソッドを以下のように更新します。
```
methods: {
  login(username) {
    if (username) {
      store.commit("user/login", {
        username,
        token: "sxgWKnLADfS8hUxbiMWyb"
      });
      store.commit("say", "Logged in successfully, welcome back!");
    }
  }
}
```
この更新された login メソッドは、Vuex ストアに必要なアクションをコミットして、ユーザーのログイン状態を更新し、ウェルカムメッセージを表示します。

ログイン機能をテストする

index.html ファイルの変更を保存します。
ブラウザで Web ページを更新します。
ユーザー名「admin」を入力して、「確認」ボタンをクリックします。
このとき、「完了時の表示」画像に示すように、ウェルカムパネルが表示されるはずです。

Completed Effect

おめでとうございます！あなたは正常にログイン機能を修正し、コードに必要な変更を加えました。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験（Lab）をもっとたくさん行って技術力を向上させることができます。

Vue.js と Vuex を使ったログイン機能の構築