Vue Element フロントエンドアプリケーション開発: Vuex での API ストアビューの使用

概要

Vue アプリケーションを開発する場合、変数の内容を記録する必要があることがよくあります。これらは、インターフェイスの状態を保持したり、ページ間のデータ交換を処理したりするために使用できます。これらの内容の処理は、Vuex 状態制御として分類できます。たとえば、フロントエンドでバックエンドデータにアクセスする必要がある場合は、通常、カプセル化された Web API を呼び出してデータを取得し、Store モードを使用して関連データや状態の変更を処理します。一方、ビュー View は主にインターフェイスの表示処理を担当します。本稿では、主にこれら 3 つの関係を統合して、データの取得、処理、表示などの論理操作を実現する方法について紹介します。

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中型ストレージを使用してアプリケーションのすべてのコンポーネントのステータスを管理し、対応するルールを使用して、ステータスが予測可能な方法で変更されるようにします。 Vuex の関連する State、Getter、Mutation、Action、Module の違いと接続の詳細については、https://vuex.vuejs.org/zh/ を参照してください。

1. フロントエンドとバックエンドの分離とWeb APIの優先ルート設計

Web API は、より幅広いクライアント (ブラウザー、携帯電話やタブレットなどのモバイルデバイスを含む) をサポートする HTTP サービスを構築できるアプリケーションインターフェイスフレームワークです。ASP.NET Web API は、.NET Framework/.net Core 上で RESTful アプリケーションを構築するための理想的なプラットフォームです。現在開発されているアプリケーションシナリオでは、Winform クライアント、APP プログラム、Web サイトプログラム、現在人気の WeChat アプリケーションなどにアクセスする必要があることがよくあります。これらのデータは、構築する必要がある Web API プラットフォームである同じサービスによって提供される必要があります。 Web API 層はパブリックインターフェイス層であるため、各インターフェイスアプリケーション層のデータの一貫性を確保できます。

フロントエンドとバックエンドを完全に分離することを優先しているため、バックエンドは Web API で完全に構築およびサポートできます。.net フレームワークまたは .net コアで構築された統合インターフェイスプラットフォーム、Asp.net で作成されたシンプルな Web API インターフェイスプラットフォーム、または ABP-aspnetboilerplate (ABP フレームワーク入門エッセイ) に基づいて構築された Web API プラットフォームを使用できます。

このようにして、これらの API インターフェイスに基づいて、Web フロントエンド、Winform フロントエンド、さまざまな APP アプリケーションなど、複数のフロントエンドアプリケーションを構築できます。

フロントエンドとバックエンドを分離する VUE + Element 開発方式の導入により、フロントエンドとバックエンドの境界が非常に明確になりました。フロントエンドは、ネットワークを介して対応する JSON を取得することで、フロントエンドアプリケーションを構築できます。

フロントエンド処理では、VuexモードのStoreオブジェクトを使用して、ActionとMutationのリクエスト処理を実装することがメインです。データを取得した後、State状態のデータが更新されます。現在のページのデータのみを処理する場合は、状態情報を保存する必要さえありません。返されたデータを直接取得し、インターフェイスビューに直接更新できます。

開発の初期段階では、バックエンドとの関係すら必要ありません。Web API からデータをリクエストする代わりに、モックデータを使用できます。モックデータ構造が Web API インターフェイスによって返される JSON と一致している限り、既存のコード処理方法に影響を与えることなく、後の段階で高速ドッキングを実現できます。

2. Axiosネットワークリクエスト処理

さらに先に進む前に、Vuex のオブジェクトの概念とそれらの関係について知っておく必要があります。

ネットワークリクエストを開始する前に、axios を理解する必要があります。axios は、ブラウザーと nodejs 用の Promise ベースの HTTP クライアントです。基本的にはネイティブ XHR のラッパーですが、最新の ES 仕様に準拠した Promise の実装バージョンです。ここで知っておく必要があるのは、これが非常に強力なネットワークリクエスト処理ライブラリであり、広く使用されているということだけです。これを理解するために、いくつかのコード例を挙げてみましょう。

POSTリクエスト

アクシオス({
    メソッド: 'post'、
    URL: '/user/12345',
    データ： {
        名: 'フレッド',
        姓: 'フリントストーン'
    }
})
.then(関数 (応答) {
    console.log(応答);
})
.catch(関数 (エラー) {
    コンソール.log(エラー);
});

GETリクエスト

アクシオス
  .get('http://rap2api.taobao.org/app/mock/23080/resources/search',{
      パラメータ: {
         id: 5
      }
   })
  .then(res => {
    console.log('データは次のとおりです:', res);
  })
  .catch((e) => {
    console.log('データの取得に失敗しました');
  });

ドメイン間でデータを要求する場合は、設定ファイルでプロキシを設定する必要があります。vue-cli3 プロジェクトの場合、vue.config.js に設定を記述する必要があります。

リクエストインターセプションとレスポンスインターセプションを別々に設定し、リクエストが送信されてレスポンスが到着する前に判断や処理を行うことができます。一般的な処理方法は、リクエストクラスなどのクラスをカプセル化し、リクエストの前にユーザー識別情報を追加するなど、インターセプター上で統一された処理を実行します。

// axiosインスタンスを作成する
constサービス = axios.create({
  タイムアウト: 5000 // リクエストタイムアウト
})

// リクエストインターセプションをリクエストする service.interceptors.request.use(
  設定 => {

    （store.getters.token）の場合{
      config.headers['X-Token'] = getToken()
    }
    設定を返す
  },
  エラー => {
    // リクエストエラーに対して何かを行う
    console.log(error) // デバッグ用
    Promise.reject(error) を返します。
  }
）

3. Vuex での API、ストア、ビューの使用

Vuex の API、Store、View の紹介に戻りましょう。

API リクエスト呼び出しクラスのカプセル化を見てみましょう。以下に示すように、操作データ用の API クラスファイルをいくつか作成しました。各 API 名は、特定のビジネスに対するリストリクエスト、単一リクエスト、追加、削除、変更など、ビジネスの集中処理に対応しており、これらはすべて 1 つの API クラスにカプセル化できます。

以下に示すように、Product.js のクラスファイル定義を見てみましょう。

ここでは、Request と Axios の操作の比較を使用します。Request は Axios の単純なカプセル化であり、主にいくつかのログイン情報といくつかの応答エラー処理を傍受して挿入するため、この 2 つは非常によく似ています。

'@/utils/request' からリクエストをインポートします
'axios' から axios をインポートします

ここでのURLでは、プロキシ設定の処理を通じて、対応するiqidiが対応する外部ドメイン名の処理に置き換えられ、クロスドメイン処理リクエストデータの取得が実現されます。ここで知っておく必要があるのは、URLが最終的に次のように変換されるということです。

http://www.iqidi.com/h5/GetProductList 実際のアドレスを使用してリクエストを行うことができ、戻り値は JSON データセットです。

Vue ビュー内の JS 処理部分により、以下のように API を直接導入してデータをリクエストすることができます。

'@/api/product' から { GetProductList } をインポートします。

次に、メソッドメソッド内で API データを取得するメソッドを定義できます。

メソッド: {
getlist(タイプ) {
   GetProductList({ type: type }).then(応答 => {
     const { データ } = レスポンス
     this.productlist = データリスト
     this.listLoading = false
   })
}

この呼び出しは最も直接的な API 呼び出しであり、非同期または同期処理のために Store モジュールにカプセル化された Action または Mutation を導入しません。一般に、ほとんどのページ処理やコンポーネント処理ではデータのグローバルな状態保存は必要ないため、つまりグローバル Store オブジェクトを処理する必要がないため、このメソッドを直接使用する方が簡単です。

対応する情報をグローバルに保存する必要がある場合は、Action または Mutation の処理を含む、Store モジュールでの API 呼び出しのカプセル化を導入する必要があります。

まず、次のインターフェースに示すように、Store ストレージクラスを定義しましょう。

製品リストなどのデータをグローバルな状態で保存する必要がある場合は、product.js などの対応する Store ディレクトリにモジュールを作成し、Action、Mutation、State などの情報を管理することを検討できます。

'@/api/product' から { GetProductList, GetProductDetail } をインポートします。

定数状態 = {
  製品リスト: [],
  製品詳細: null
}
const 変異 = {
  SET_PRODUCT_LIST: (状態、リスト) => {
    state.productlist = リスト
  },
  SET_PRODUCT_DETAIL: (状態、詳細) => {
    state.productdetail = 詳細
  }
}

定数アクション = {
  // 製品リスト getProductList({ commit }, { type }) {
    コンソールログ(タイプ);
    新しい Promise を返します ((resolve, reject) => {
      GetProductList({ type: type }).then(応答 => {
        const { データ } = レスポンス
        コミット('SET_PRODUCT_LIST', データ)
        解決(データ)
      }).catch(エラー => {
        拒否(エラー)
      })
    })
  },

  // 製品の詳細を取得する getProductDetail({ commit }, { id }) {
    新しい Promise を返します ((resolve, reject) => {
      GetProductDetail({ id: id }).then(レスポンス => {
        const { データ } = レスポンス
        コミット('SET_PRODUCT_DETAIL', データ)
        解決(データ)
      }).catch(エラー => {
        拒否(エラー)
      })
    })
  }
}

エクスポートデフォルト{
  名前空間: true、
  州、
  突然変異、
  アクション
}

見てみましょう。Store モジュールのビジネスクラスが導入されると、インターフェイスビューの呼び出しコードが変更され、対応する Action または Mutation が呼び出されます。

 メソッド: {
    getlist(タイプ) {
      // GetProductList({ type: type }).then(response => {
      // const { データ } = レスポンス
      // this.productlist = data.list
      // this.listLoading = false
      // })

      this.$store.dispatch('product/getProductList', { type: type }).then(data => {
        this.productlist = データリスト
        // this.loading = false
      }).catch((e) => {
        // this.loading = false
      })
    }

ここで強調しておきたいのは、一般的にはビューモジュール内で API クラス呼び出しを使用できるということです。対応する管理のために各業務モジュールごとに Store モジュールクラスを作成する必要はありません。これらのステータスデータを複数のページやコンポーネント間で共有する必要がある場合にのみ、詳細な管理のために Store モジュールクラスの導入を検討してください。

対応するビジネスモジュールの Store 状態管理モジュールを作成する必要がある場合は、前述の product.js クラスファイルなどの対応するモジュールクラスを作成する必要があることを説明しました。

Modules ディレクトリ内の Vuex Store 管理クラスは、業務の境界に応じて分割されており、必要に応じて対応する業務ごとに別のファイルが作成され、管理されます。

index.js では、動的モジュール読み込みを通じてこれらのクラスを異なる名前空間に従って読み込み、均一に使用します。

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
'./getters' からゲッターをインポートします

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// `import app from './modules/app'` は必要ありません
// モジュールファイルからすべての vuex モジュールを自動的に要求します
const モジュール = modulesFiles.keys().reduce((モジュール、モジュールパス) => {
  // './app.js' を 'app' に設定
  定数 moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  定数値 = modulesFiles(modulePath)
  モジュール[モジュール名] = 値.default
  リターンモジュール
}, {})

定数ストア = 新しい Vuex.Store({
  モジュール、
  ゲッター
})

デフォルトストアをエクスポート

以上が、Vue Element フロントエンドアプリケーション開発における Vuex での API Store View の使用に関する詳細な内容です。Vue の詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。

以下もご興味があるかもしれません: