タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/inject - Qiita
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/injectJavaScriptVue.jsフロントエンドVuexCompositionAPI まえがき 最近iCAREさんの所で Vue.js を一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回の記事の内容はiCareさんのDev Meetupで話した内容になります. 最近公式のソースを追った所、 Composition API はapiの紹介はあれども、コードの書き方やその背景、Tips等は全然見当たりませんでした. また、すごく強力なapiである provide/inject
inject と Headless Vue インスタンスを活用したリアクティブな認証管理 - ElevenBack LLC. Engineering
この記事は Nuxt.js アドベントカレンダー 24 日目の記事です。 ここ一年ほどほとんど Nuxt.js で Vue.js を単体で使うことがめっきり減った @potato4d です。 今回はニッチな話題として、「JavaScript の世界のオブジェクトに Vue.js のリアクティブ機構をもたせる」という話をしたいと思います。 なお、今回はややこしいコードベースを省く意味でも Nuxt.js 環境を前提とします。 実現したい要件 まずは実現したい要件を定義します。 今回は、現在弊社にて開発中の Web サービスのシステムをベースとして考案します。 Firebase Authentication を使ってユーザー情報をやりとりする データベースヘの取得・保存操作では、 Firebase 側のユーザーの uid を利用するためグローバルから認証情報にアクセスできてほしい できればその
Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。 - Qiita
Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。JavaScriptTypeScript設計Vue.jsNuxt はじめに Composition APIで、Providerパターン(provide/inject)が、なぜ重要なのでしょうか。 Composition APIを使えば「状態やロジック」を簡単にコンポーネントの外に切り出すことができます。 しかしながら、Composition APIだけでは「ロジックや状態は切り出せても、複数コンポーネント間で共有できない」からです。 Composition APIによって、荷物をダンボールに梱包はできても、運ぶ人がいない状態です。 みなさんは、VueのProviderパターン(provide/inject)って使ったことありますか? https:/
vue3が本格的に使われるようになってくるとvue2系では影が薄かったprovideとinjectも流行ってくると思います。（願望） こいつらがいい感じに型で補強してあげるとより使いやすくなるので紹介します。 provide/injectって何 そもそもこいつらが何かという話ですが、簡単に言えば親のインスタンスにkey:valueを保持しておいてどのコンポーネントからでも取り出せるようにする関数です。 以下のように、provideで登録したkeyとvalueをinjectで簡単に利用することができます。valueは登録時にリアクティブにしておけば、取り出した側での変更を追跡します。 main.ts import { createApp, ref } from 'vue' import App from './App.vue' const key = 'count' // 一意なキーを生成す
週刊Railsウォッチ（20200721後編）『パーフェクトRuby on Rails』増補改訂版発売間近、scan_left gemでレイジーなinjectほか｜TechRacho by BPS株式会社
2020.07.21 週刊Railsウォッチ（20200721後編）『パーフェクトRuby on Rails』増補改訂版発売間近、scan_left gemでレイジーなinjectほか こんにちは、hachi8833です。今週木金は祝日のため、来週7/27、7/28の週刊Railsウォッチは通常記事となります🙇。 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 ⚓臨時ニュース: 『パーフェクトRuby on Rails【増補改訂版】』が7/25より発売🎉 つっつきの後で知りました。紙の書籍と電子版同時発売だそうです。 パーフェクトRails増補改訂版、PDF/EPUB版と、kindle版も7/25同日発売になりな雰囲気です！やっ
というブログを書こうとしたら、すでにあった。 Dependency Injectionでやりたいことはモジュールimport - きしだのHatena 依存性の注入って要するにimportなので。 まず、DIコンテナを実装してみるとどういうものかがわかりやすくなります。 このときの結論はこんな感じ。 DIコンテナというのは、Javaのリフレクションやバイトコード操作、ThreadLocalといった、あまり美しくない部分を覆い隠してきれいなコードでアプリケーションを構築するための仕組み 作って理解するDIコンテナ - きしだのHatena 言語機能の補完なので、他の言語で同様に便利とは限らないわけですね。 わかりやすい例として、DIコンテナの現実的に便利なのはAOPを利用した宣言的トランザクションやログです。これはAspectJのように言語機能としてAOPが用意されていれば不要になります。
ストアの型はサボった。 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
Nuxt.jsで異なるコンポーネントから共通で利用できる関数を定義する（inject編） - Qiita
異なるコンポーネントから共通で利用できる関数を定義したかったので、試してみました。 以前の記事ではmixinを使って実現しましたが、この方法では asyncData や fetch 内で共通の関数を利用できませんでした。 そのため、今回はinjectを使って実現しています。 この方法では、 asyncData や fetch 等のSSR時も関数を利用できるため、こちらの方が良いかもしれません。 共通の関数を定義する plugins/ 内に utils.js というファイルを作成し、ここに関数を定義していきます。 今回は例として hoge() と fuga() という、2つの関数を定義するものとします。 使用する際は this.$huga() のように記述します。 const hoge = () => { return "hoge"; } const fuga = () => { retur
Vue Composition API でprovide , inject を用いたデータの状態を管理する方法 この記事では、Vue Composition API で用意されているprovide, inject を使って、Vuex を用いないデータの状態管理について記事をまとめました。公式のドキュメントで詳しく記されていなかったので、この記事で詳しく書いていきたいと思います。 2020/2/26 追記： 今月２月に、Vue Composition API に対応した Vuex4 が公式に発表されました。 詳細についての記事は、こちらを参照してください。 公式サイト https://zenn.dev/okakyo/articles/87faf411c4766e5ccb4a Vuex について Vuex は、Vue.js でグローバルでのデータの状態管理を行うことができるライブラリです。Vu
本番でWebアプリケーションを運用していると，様々なログを取り扱う必要がある．これはKubernetesでも同じで，Kubernetes上で動かしているコンテナのログも，何かしらの方法で集約してどこかに蓄えておいて，分析とか検索とかをしたくなる． こういう用途でまず思いつくのがfluentdで，fluentdはKubernetes用にDaemonSetを用意してくれている． github.com こいつを使えば，コンテナの標準出力に出てきたログは，すべてfluentdで拾えることになる． では，標準出力以外の，例えばファイルに吐き出すようなログはどうなるだろう？ こういったログを集めるためには，アプリケーションのコンテナのサイドカーとしてfluentdを動かし，ログファイルをVolumeMountすることでサイドカー側のfluentdにログファイルを読ませる，というようなことをする必要があ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vue3のprovide,injectで型安全なストアを作る - うしろのこの本ください
JavaのDIコンテナは言語機能の補完でありinjectはimport - きしだのHatena
Vue3のinject/provideでミニマルなストアを作る - うしろのこの本ください
Vue Composition API でprovide , inject を用いたデータの状態を管理する方法
PodにfluentdのSidecarを自動でinjectする - PartyIX
chie.st.coresv.net
www.nikkei.com
www.nikkei.com
driveon43.com
sakai-shinkyuin.hatenablog.com
hatch51.com