Vue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blog
前書き はじめまして、ANDPADでフロントエンド開発を担当している小泉です。入社から2年弱ですが、ここ1年の社員数の増えるペースが速すぎてすっかり古株になりつつあります。 自分は入社当初からVue.js・Nuxt.jsを使って開発を行っているのですが、2020年7月頃よりスタートしたプロジェクトで、Vueの新しい記法であるVue Composition APIを全面的に採用しています。 この記事では、Composition APIを実際に製品開発に導入するまでの流れから、9ヶ月ほど使っていく中で気づいたComposition APIのメリットとデメリットなどをまとめています。 昨年秋にVue 3.0が正式リリースされ、今年はNuxt 3.0も控えており、これからVue 3.0やComposition APIを本格導入するチームや会社も多いと思いますので、その際の参考になれば幸いです。 技
Vue Composition APIではどうやるの？と思った事とその方法
変更履歴2020-08-30 [追加] リファレンスIDを指定した子コンポーネントへの型付アクセス(TypeScript)2020-07-30 [追加] リファレンスIDを指定した子コンポーネントへのアクセス（可変数）前提Vue 3の新しいAPIであるComposition APIを使用して、調べたこと考察したことをまとめています。 Vueの既存のAPIであるOptions APIやProperty Decorator(TypeScript)の使用経験はあり、その上でComposition APIではどのように実現するのか調べた点を中心に記載します。 Composition APIの使用環境はVue 2とComposition APIプラグインを使用しています。 Vue 3のリリース版とは仕様が異なる可能性があります。 使用バージョン Vue 2.x@vue/composition-api
Vue3のinject/provideでミニマルなストアを作る - うしろのこの本ください
ストアの型はサボった。 github.com Vue3からinjectとprovideという関数が提供されており、（機能的にはVue2のものと同じだが）コンポネ間の状態共有が簡単にできるようになった。 ドキュメント https://composition-api.vuejs.org/api.html#dependency-injection 簡単に言うと、provideにキー付きで渡したリアクティブな状態をinjectで取り出すことでどこからでも状態を参照できるようになるもの。 provideとinjectはsetupでのみ動作する。 例えば状態を共有したいコンポーネント2つがあった時、それ用のスコープでディレクトリを切って専用のストアを作ることが可能。 Symbolを使って一意のキーを生成し、リアクティブにしたい状態や関数をセットでprovideに渡す。 components/miniS
How to use Vuex’s state/getters with composition-api in Vue component
How to use Vuex’s state/getters with composition-api in Vue component The composition-api is the next generation paradigm of Vue.js. I would say that it’ll be a standard way in Vue.js v3. But now, you can use it in a v2 project by using https://github.com/vuejs/composition-api package. We can easily find the way how to replace existing components with composition-api, but how can we use it with Vu
Vuexのstateをcomposition-apiでReactiveに使う - Qiita
Vue.js版のReact HooksにあたるComposition APIとVuexを組み合わせる方法を紹介します。 vuejs/composition-api: Vue2 plugin for the Composition API. https://github.com/vuejs/composition-api こちらの方の投稿でVuexのstateそのものをreactiveにする方法を紹介されていますが、今回はVuexはそのままにしておく方法です。 Nuxt.js + Composition APIでVuexのStateをReactiveに使う方法 https://qiita.com/tubone/items/f5c7e8e79e21b051eec4 Composition APIによるカウンターの実装 単純なカウンターを例にComposition APIで実装すると以下のように
Nuxt.js + Composition APIでVuexのStateをReactiveに使う方法 - Qiita
新しく出たComposition APIに苦戦 フロントエンド初学者の私が、Vue.jsの新しいAPIであるComposition APIを使ってNuxt.jsの実装を行う機会があり、Vuexを使ったストアで非常につらい思いをしたのでまとめます。 多分、もっとちゃんとしたやり方があるとは思いますがひとまず動いたので記事にしていきます。 とりあえず動いたゴミコードはこちらのGitHubにあげてます。 結構適当にやってます。 なお、Composition-APIについてよくまとまっている記事はVue Advent Calendar 2019に載っていたComposition APIってなんだという記事が大変に参考になるかと思いますし、本実装のモチベーションになった記事としてきたるべきvue-nextのコアを理解するという記事の存在があります。 大変参考にさせていただきました！ 自分のゴミブログ
vue-composition-apiを使って機能単位のコード分割と合成を試してみた - Qiita
概要 この記事では、Vue.js ver 3.0 で採用予定の Composition API (https://vue-composition-api-rfc.netlify.com) を使って、このRFCの動機のひとつである「Code Organization」がどのようにして実現可能なのかを試しに実装してみた結果をまとめました。 はじめに100行超の単一のSFCでデモアプリを実装し、そのあとに「Function -> Module -> Component」の順番で機能単位での分割を進めた前後のコードを比較しています。 Composition APIでどのように実装すべきかを模索されている方にとっての参考になれば幸いです。 Logic Reuse & Code Organization The APIs proposed in this RFC provide the users w
Vue Composition APIのコラムっぽいもの集 - mya-ake com
この記事についてこの記事はbosyu Advent Calendar 2019の5日目の記事です。 昨日のめろたんのVue Composition APIで型がぶっ壊れて楽しかったですに引き続きVue Composition APIのお話です。 僕はComposition APIのコラムっぽいものをいくつか書いてみた記事です。 ちなみにサムネイルは@murokacoさん作です！ ⚠️注意Vue Composition API自体はまだ正式なリリースがされていない実験的なAPIです。 Vue Composition APIのサイトにも記載されていますが、まだ破壊的な変更がされる可能性もあり、プロダクションでの利用は推奨されていません。 bosyuでなにやってるの？あんまり表立って言ったりしてなかったんですが、夏頃から業務委託でbosyuの開発をしています。 具体的にはbosyuのフロントエン
Vue 2.xのOptions APIからVue 3.0のComposition APIへの移行で知っておくと便利なTips - ZOZO TECH BLOG
こんにちは。ECプラットフォーム部のMA（マーケティングオートメーション）アプリケーションチームで、社内向けのマーケティング運用ツールを開発している長澤（@snagasawa_）です。 先日、日本時間の2020年7月18日にVue 3.0のRelease Candidate(v3.0.0-rc.1)がリリースされ、今後は最終リリースまで主要なAPIのbreaking changeは想定していないとのアナウンスがされました。アナウンスを受け、現在社内ツールで進めているOptions APIからComposition APIへの移行で得られたTipsについて紹介します。 この記事では公開時点でのVue 3.0 betaへのアップグレードの方法と、Vue + TypeScriptでのOptions APIからComposition APIへの移行のTipsについてまとめました。Vue 3.0への
Vue Composition API を使ったストアパターンと TypeScript の組み合わせはどのくらいスケールするか？ - Qiita
Vue Composition API を使ったストアパターンと TypeScript の組み合わせはどのくらいスケールするか？TypeScriptVue.jsvue-composition-api Vue.js の公式ドキュメントには「状態管理」という章があり、そこでは単純なストアパターンと、より大規模向けという Vuex ライブラリを使う 2 つの手法が紹介されています。 ですが、それぞれどこに長所・短所がありどのような基準で選択すれば良いのかは「大規模」というあやふやな基準でしか示されていません。実際その境界はどこにあるのでしょうか？ さて、TypeScript も同様に大規模アプリケーション向けと言われます。型安全性の有用さは他言語の世界で実証されています。ところが残念なことに Vuex の API 設計とは極めて相性が悪いというのはよく言われます。現時点で両者を両立させるのは大変
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to validate a form with ref in Vue Composition API
Using Vuex with the Vue Composition API