1SPWJEF*OKFDUͰ5ZQF4DSJQUͷ ԸܙΛड͚Δํ๏ 7VFษڧձJOେࡕ 4"8

$(whoami) ࢯ໊Ճ౻फҰ࿠ ࡀ ϋϯυϧωʔϜ4"8 9 چ5XJUUFS !B[VLJ@FBUFS ؔ੢ͷ*5ΤϯδχΞίϛϡχςΟͷ೐΍͔͠୲౰ ࣗশ େࡕࡏॅɾѪ஌ग़਎ ಘҙ෼໺8FCΞϓϦέʔγϣϯ։ൃ 7VF -BSBWFM ʮྫྷ΍͠த՚͸͡Ίͨ͠ʯ͸ฉ͘ͷʹ ʮྫྷ΍͠த՚ऴΘΓ·ͨ͠ʯ͸ฉ͔ͳ͍ͷ͸ ͳͥͩΖ͏ ࠓ೔ͷ໎ݴ

ࢠଙͷίϯϙʔωϯτʹ௚઀σʔλΛ౉͢ 7VF͔Β1SPWJEF*OKFDUͱ͍͏ػೳ͕௥Ճ ࢠଙͷίϯϙʔωϯτʹσʔλΛ౉͢৔߹ʹpropsͰ͸όέπϦϨʔʹͳΔ 1SPWJEF*OKFDUΛར༻͢Δ͜ͱͰpropsͷόέπϦϨʔΛղফ ΞϓϦέʔγϣϯϨϕϧͰ1SPWJEFΛར༻͢Δ͜ͱͰ%*Λ࣮ݱ શͯͷίϯϙʔωϯτͰ*OKFDUΛ͢Δ͜ͱͰσʔλΛऔಘՄೳ ͋ΔίϯϙʔωϯτͰ1SPWJEFͨ͠৔߹͸ࢠଙͷίϯϙʔωϯτͰͷΈ*OKFDUՄೳ

1SPWJEF*OKFDUͷΠϝʔδ Header Layout Root Main Footer ArticleList ArticleEditor provide('user', me) inject('user') inject()Մೳͳൣғ ઌ૆ͷίϯϙʔωϯτͰ provide()͢ΔσʔλΛొ࿥ ࢠଙͷίϯϙʔωϯτͰ inject()ͯ͠σʔλΛऔಘ

1SPWJEF*OKFDUͰ5ZQF4DSJQUͷԸܙΛड͚Δ Ωʔ͕จࣈྻͷ৔߹͸inject() ͷฦ٫ܕ͸unknown inject()Ͱऔಘͨ͠σʔλͷܕΛࢦఆ͢Δʹ͸Ωϟετ͕ඞཁ provide()ʹ౉͞ΕͨσʔλܕͱҟͳΔܕʹΩϟετͯ͠΋ΤϥʔʹͳΒͳ͍ ΩʔͷจࣈྻΛUZQP͍ͯͯ͠΋੩తղੳͰ͸ΤϥʔΛݕ஌Ͱ͖ͳ͍ ΩʔʹInjectionKeyΛར༻͢Δ͜ͱͰܕ৘ใΛऔಘ inject()ͷฦ٫ܕ͸T|undefinedʹͳΓΩϟετ͕ෆཁ ܕͷෆ੔߹΍ΩʔͷUZQPͳͲ͕͋Δ৔߹ʹ੩తղੳͷԸܙΛड͚ΒΕΔ

InjectionKeyͷར༻ Layout Main ArticleEditor export const userInjectionKey = Symbol() as InjectionKey; import { userInjectionKey } from './InjectionKey'; const me: User = { name: 'Jack' }; provide(userInjectionKey, me); import { userInjectionKey } from './InjectionKey'; const me = inject(userInjectionKey); console.log(me?.name); Layout.vue ArticleEditor.vue InjectionKey.ts InjectionKeyʹΩϟετͨ͠ SymbolΛFYQPSU inject()ͷฦ٫ܕ͸ User|undefinedͱͳΔ

·ͱΊ 1SPWJEF*OKFDUʹ͍ͭͯͷ֓ཁΛઆ໌ 1SPWJEF*OKFDUͰ5ZQF4DSJQUͷԸܙΛड͚Δํ๏Λ঺հ InjectionKey ΛΩʔʹར༻͢Δ͜ͱͰ࣮ݱՄೳ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠