vuexを使用してuniappにログイン機能を実装する方法

Vue.js は、今日のフロントエンド開発で最も人気のある JavaScript フレームワークの 1 つです。 uni-app は、Vue.js を使用してクロスプラットフォーム アプリケーションを開発するためのフレームワークです。 Vuex は Vue.js の状態管理ライブラリであり、uni-app におけるデータ状態管理の重要な部分です。この記事では、uni-app が Vuex を使用してログイン機能を実装する方法と、この方法を通じてより詳細な状態管理を実現する方法を紹介します。

前提知識

uni-app が Vuex を使用してログイン機能を実装する方法を理解する前に、次の関連テクノロジを学習する必要があります:

• HTML と CSS の基本
• Vue.js の基礎知識
• uni-app の基礎知識
• Vuex の基礎知識

上記の技術を習得していれば、読み続けて。

準備作業

異なるページ間の状態転送を開始する前に、次の作業を準備する必要があります。

1. uni-appで新しいプロジェクトを作成して使用します。ビュークス。 HBuilderX などのツールを使用してユニアプリ プロジェクトを作成し、デフォルトで Vuex の統合を選択できます。

2. HBuilderX でプロジェクトを開き、pages ディレクトリに Login.vue ファイルを作成します。 App.vue ファイルを変更し、その内容を次のように変更します。

   <template>
     <div>
       <router-view />
     </div>
   </template>
   
   <script>
   export default {
     onLaunch() {
       uni.reLaunch({
         url: '/pages/login/login'
       })
     }
   }
   </script>

3. uni-app に uni-request ライブラリをインストールして構成し、main.js ファイルの先頭で引用します。

   import uniRequest from 'uni-request';
           
   uniRequest.defaults.baseURL = 'http://localhost:3000/api';
           
   // 请求拦截器
   uniRequest.interceptors.request.use((config) => {
     const token = uni.getStorageSync('token') || '';
     config.headers.Authorization = token;
     return config;
   });
           
   // 响应拦截器
   uniRequest.interceptors.response.use((response) => {
     if (response.statusCode === 401) {
       uni.removeStorageSync('token');
       uni.reLaunch({
         url: '/pages/login/login'
       });
     }
     return response.data;
   }, (error) => {
     return Promise.reject(error);
   });

   uni-request このライブラリを使用すると、uni-app での HTTP リクエストの作成が簡単になります。

ログイン機能の実装

上記の作業が完了したら、ログイン機能の実装を開始できます。具体的な実装方法は次のとおりです。

1. ユーザー名入力ボックスとパスワード入力ボックスを含むログイン フォームを Login.vue ファイルに書き込みます。コードは次のとおりです。

   <template>
     <view class="container">
       <form @submit.prevent="handleSubmit">
         <view class="field">
           <input type="text" name="username" v-model="form.username" placeholder="请输入用户名" />
         </view>
         <view class="field">
           <input type="password" name="password" v-model="form.password" placeholder="请输入密码" />
         </view>
         <view class="field">
           <button class="btn" type="submit">登录</button>
         </view>
       </form>
     </view>
   </template>

2. Login.vue ファイル内に computed を作成して、ユーザー名とパスワードが空かどうかを確認し、## を作成します。 #methods ログイン フォームを送信する #handleSubmit メソッドを記述します。コードは次のとおりです。

   export default {
     data() {
       return {
         form: {
           username: '',
           password: ''
         }
       };
     },
     computed: {
       isFormValid() {
         return this.form.username.trim() !== '' && this.form.password.trim() !== '';
       }
     },
     methods: {
       async handleSubmit() {
         const data = await this.$store.dispatch('login', this.form);
         uni.setStorageSync('token', data.token);
         uni.reLaunch({
           url: '/pages/index/index'
         });
       }
     }
   };

3. ストア ディレクトリに

   store.js ファイルを作成し、user という名前の Vuex モジュールを定義します。このモジュールには次の 3 つの部分が含まれています:

   • state: ユーザー情報とトークンを含む状態オブジェクト。
   • ゲッター: ユーザー名やログインしているかどうかなど、新しい状態を導出するために使用される計算されたプロパティ。
   • actions: ログインやログアウトなどの非同期操作に使用されます。
4. 現在のユーザー情報を取得および設定し、新しい状態を計算するために、

   store.js で state を定義します。 ##getters、コードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const state = {   user: null,   token: null }; const getters = {   username: (state) =&gt; {     return state.user ? state.user.username : '';   },   isLoggedIn: (state) =&gt; {     return !!state.token;   } };</pre><div class="contentsignin">ログイン後にコピー</div></div>

更新用に
5. store.js

   で mutations を定義します州＃＃＃。この例では、ユーザー情報とトークンを更新します。コードは次のとおりです。

   const mutations = {
     setUser(state, user) {
       state.user = user;
     },
     setToken(state, token) {
       state.token = token;
     }
   };

   バックエンド サーバーを非同期に呼び出すために使用される
store.js
6. で

   actions を定義します。ユーザーのログインと state の更新。 uni-request ライブラリを使用して、非同期リクエストを行うことができます。コードは次のとおりです。

   const actions = {
     async login({ commit }, { username, password }) {
       const { data } = await uniRequest.post('/login', { username, password });
       commit('setUser', data.user);
       commit('setToken', data.token);
       return data;
     }
   };

store.js
7. に

   index.js を作成して、定義したモジュールを公開します。コードは次のとおりです。

   import Vue from 'vue';
   import Vuex from 'vuex';
   import user from './modules/user';
   
   Vue.use(Vuex);
   
   const store = new Vuex.Store({
     modules: {
       user
     }
   });
   
   export default store;

   概要

この記事では、Vuex を使用して uni-app にログイン機能を実装する方法を学びました。また、

uni-request

ライブラリを使用して非同期リクエストを行う方法、および

actions と mutations を定義して state# のデータを更新する方法も示しました。 ## 。 Vuex を使用すると、アプリケーションの状態の管理が容易になり、複雑なアプリケーションを迅速に開発できるようになります。ユニアプリでクロスプラットフォーム アプリケーションを開発する予定がある場合は、Vuex の使用法をマスターすることが非常に重要です。

以上がvuexを使用してuniappにログイン機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。