Vue 3 + TypeScript ではじめるリポジトリパターン - Qiita
はじめに Vue 3系 + TypeScript での API によるデータ操作をリポジトリパターンを用いてまとめたときの実装内容を、実際の手順とコードを踏まえつつまとめます。 リポジトリパターンとは リポジトリパターン とは、データ操作の処理を一元管理することで、ビジネスロジックからデータ操作ロジックを切り離すデザインパターンです。 これにより、データ操作ロジックの保守性・再利用性を向上させることができます。 つまり axios の多重管理が発生し、エンドポイントや axios のプロパティに変更があった際など保守するのが大変 コンポーネント内で同じようなデータ操作ロジックを何度も書くのが大変 コンポーネント内でのデータ操作ロジックの直書きによって単体テストが大変 このような大変を解消してくれるのが、リポジトリパターンです。 サンプルコード では、実際に手を動かしてみていきましょう。 1
axiosをグローバルに呼び出す - Qiita
import Vue from 'vue'; import axios from 'axios'; . . . Vue.prototype.$http = axios.create( { baseURL: process.env.VUE_APP_API_URI, withCredentials: true }, ); . . . methods: { fetchItemList() { return new Promise((resolve) => { this.$http.get('/api/v1/items').then((response) => { this.itemList = response.data.index; resolve(); }).catch(省略); }); }, }, . . .
Vue.js+axiosでAPIを叩く時のパラメータをCamelCase・snake_caseに変換してみた - Qiita
// ライブラリを読み込む window._ = require('lodash'); // 初期設定 window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // 下記コードを追記 const mapKeysDeep = (data, callback) => { if (_.isArray(data)) { return data.map(innerData => mapKeysDeep(innerData, callback)); } else if (_.isObject(data)) { return _.mapValues(_.mapKeys(data, callback), val => mapKeysDeep(v
Vue.jsとAxiosなら驚くほど簡単に作れる！外部APIを使ったWebアプリの実例
ReactやAngularと並び、ここのところ人気が高まっているVue.js。Axiosを組み合わせれば外部APIを使った Webアプリも手軽に開発できます。 JavaScriptのアプリケーションを作っていると、よくリモートソースからデータを取得したり、APIを使いたくなったりすると思います。最近、公開されているAPIを見ていたら、ソースからデータを取得して処理するのに良いものがたくさんあることに気付きました。 Vue.jsを使えば提供される機能を使ってアプリを構築し、数分のうちにコンテンツの配信を始められます。 ニューヨークタイムズのAPIからデータを取得して、その日のトップニュース記事を表示し、ユーザーが興味があるカテゴリのニュースを選びだせる簡単なニュースアプリの作り方を説明します。この記事の全コードはここにあります。 アプリの出来上がりは下の図のようになります。 この記事では、V
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue.js】Vue CLIでaxiosを使う方法 - Qiita
VuexのdispatchでAPI通信のPromiseを受け取る - Qiita
