kahirokunn
twitter: https://twitter.com/kahirokunn
qiita: https://qiita.com/kahirokunn
Vue.jsが大好きで毎日書いてます
最近の日課はVue 3.x がリリースされてないか確認すること
フリーランス
アイスブレイク
一般的なアプリケーションのコードで利用しても便利なのになんで推奨しないんだろう 🤔
これのせいで忘れ去られた気がします 😢
composition apiでのprovide/inject
DEMO
今回provideしてるのはcomposition function
const SharedCounterProvider = defineComponent({
template: "<div><slot/></div>",
name: "SharedCounterProvider",
setup() {
provide("SharedCounter", useCounter());
}
})
function useCounter(initial = 0) {
const state = reactive({ count: initial });
return {
count: computed(() => state.count),
set: (count) => {
state.count = count;
},
inc: () => {
state.count++;
},
dec: () => {
state.count--;
}
};
}
new Vue({
components: {
SharedCounterProvider,
SampleInjectCounter
},
template: `
<shared-counter-provider>
<sample-inject-counter/>
<sample-inject-counter/>
<sample-inject-counter/>
</shared-counter-provider>
`,
name: "SampleApp"
}).$mount("#app");
sample-inject-counterはshared-counter-providerからprovideされている値を参照している
new Vue({
components: {
SharedCounterProvider,
SampleInjectCounter
},
template: `
<shared-counter-provider>
<sample-inject-counter/>
<sample-inject-counter/>
<sample-inject-counter/>
</shared-counter-provider>
</shared-counter-provider>
`,
name: "SampleApp"
}).$mount("#app");
providerが複数ある場合、inject-counterから一番近い親componentからprovideされている値の方を参照する
provide/inject
めっちゃ便利
Vuex vs provide/inject
共有ステートを作成する時に、Vue.js公式 からは幾つかの手段が用意されています.
一例
- Vue.observable
- Vuex
- dataを共有する専用の Vue.js インスタンスの作成 (Vue.js詳しい人が
- provide/inject
共有ステートを作成したい要望がある時、最近だと Vue.observable も有力な選択肢に入ってきます.
しかし、Vue.observable で state を global に作成して利用する場合は、singleton であり、singleton が持つ新たな課題を産みます. (例えば、同一プロセスでのテストの同時実行数への制限や、各テストで singleton の初期化を忘れない、差し替え難易度等... etc
// これはsingletonなglobal stateで新たな課題を産みます.
export const sharedCounter = Vue.observable({
count: 0
})以前だと多くのプロジェクトで Vuex を使うか使わないかの話になる場合が多いです.
Vuex は分離できない単一の大きなモジュールのコードを複数人で書き、作成していく為、複数人で単一のモジュールを開発する文脈由来の課題が発生するので、腕の見せどころが多いと思います.
provide/inject は小さく分離できる小さなモジュールをアプリケーション 全体/部分 で簡単に共有できるものであり、provideするものをある程度まで小さくすれば影響範囲の把握がしやすいです.
provide/inject の乱用もよくありませんが、認証情報、環境依存情報、一部のコンポーネント専用の情報(Form等)等の共有を実現するのに役立ちます.
当然 singleton でもないですし、テストも容易です.
provide/injectは基本的にはVuexより手軽にできると思います.
しかしVuexのstateのポータビリティは高くて、SSRするプロジェクトではVuexの方がシンプルな場合があります.