Vueインスタンスが複数存在し、created等のライフサイクルフック内で共通処理が発生した場合どうすれば良いのかわからなくて困っています。
幾つかのVueインスタンスのライフサイクルフック内で同じAPIのエントリーポイントを叩く処理を想定しています。
APIのイメージは下記のようなjsonが返ってくる様なイメージで別々のタイトルの中に共通のkey"price"が設定されており、値が格納されています。
json
1{ 2 "title1": { 3 "price" : 1500 4 }, 5 "title2": { 6 "price" : 900 7 } 8}
各VueインスタンスはこのJsonの値であるtitle名と紐付いておりid名として利用しています。(例: "#title1", "#title2")
下記のような形で取得したresponseの結果一覧からpriceを取得し、価格に合わせてインスタンス内のデータを変更します。
``html
#試した内容
元のままでは効率が悪いのでAPIを叩く処理をインスタンスの外で関数として定義し、responseを格納するグローバル変数の値がからだった場合にこの関数を叩いて値を取得し、クラスをセットすることにしました。
javascript
1let res; 2let getBooks = () => { 3 axios.get('http://localhost:4567/books').then(response => { 4 res = response; 5 }).catch(error => { 6 }); 7} 8 9const instance1 = new Vue({ 10 el: '#title1', 11 data: { 12 test-class: "" 13 }, 14 created() { 15 const self = this; 16 res = res || getBooks(); 17 let title = self.$el.slice(1) 18 this.test-class = res.title.price >1000 ? "class1" : "class2"; 19 } 20}); 21const instance2 = new Vue({ 22 el: '#title2', 23 data: { 24 test-class: "" 25 }, 26 created() { 27 const self = this; 28 res = res || getBooks(); 29 let title = self.$el.slice(1) 30 this.test-class = res.title.price >1000 ? "class1" : "class2"; 31 } 32});
上記の場合だと同期的にコードが書かれていないのでresに値が入っておらず関数が叩かれた場合、APIを叩き値を取得してくるよりも前にその先の判定式、dataへのセットが行われてしまいました。
解決策、疑問点
解決策としては getBooksをasyncで定義し、値の取得が確認できるまで待ってからdataをセットする方法を思いついたのですが、いまいちこれがいい方法なのかわかっていないです。。
もっと良い方がいっぱいありそうだとは思ったのですが、自分では思いつかず、調べてみても同期的にコードを書く方法しか思いつかなかったため、もし他に良い方法があればご教示頂きたいです。
長々とすみませんが、よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー