Vue.js を利用したウェブサイトで Ajax 処理を行うための独自のクラスを使い、複数の vue コンポーネントから利用しようと思っています。認証処理を1度だけ行い、API から情報を取得したり書き込んだりするたびに認証を受けなくても済むようにするためです。
javascript
1var url = "api.example.com"; 2var api = new ApiClient(url, "user", "secret"); 3var post = api.fetch('/post/1234');
親コンポーネントの<script>部分で上記のように var で宣言しただけでは子コンポーネントからはエラーとなります。(api is not defined)
グローバル変数にするなら window.api = new ApiClient(url)
とすればとりあえず共有できました。簡単ですが綺麗ではないような感じがします。
Vue.js のコンポーネントには data, props などの格納できる領域があるので <component :api="api">
のような形で一つ一つ渡したりもできそうですが手間がかかりすぎるように思えます。
親コンポーネントに getApiInstance() などのメソッドを用意して、方法は知りませんが子からそのメソッドを通して受け取ることもできるのかもしれません。
Vuex という状態管理のためのライブラリがあるようなのでこちらも利用できそうです。
Vue.js を経験が浅いため常識をよく知らないのですが、こういったクラスオブジェクトを複数の子コンポーネントで利用するにはどういった手段を取るのが最も適切なのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。