How to define the relationship in vuex's state

by Tetsuya Tatsumi

Slide 1

Slide 1 text

)PXUPEFpOFUIF SFMBUJPOTIJQJOWVFYT TUBUF (PUBOEBKTJO/FYUCFBU !EPLFDIJO

Slide 2

Slide 2 text

ˏEPLFDIJO w .JEEMF"HFENBOXIPMJLFTUPNBLFXFC BQQMJDBUJPO CVUUFDIOPMPHZMFWFMJTʜ

Slide 3

Slide 3 text

*NQMFNFOUJOH8FC "QQMJDBUJPOGPSQFSTPOBMVTF w 7VF w 7VFY w WVFDMJ w 7VFUJGZ

Slide 4

Slide 4 text

7VFY It serves as a centralized store for all the components in an application

Slide 5

Slide 5 text

.PEFM ΠΦϯ ͓٬༷ײँσʔ ͋Γ͕ͱ͏σʔ ΠτʔϤʔΧಊ ϋοϐʔσʔ

Slide 6

Slide 6 text

%FpOFSFMBUJPOTIJQCZ SFGFSFODF TUBUF\ TIPQT EJTDPVOUT< \OBNFb͓٬༷ײँσʔ` TIPQBFPO^ \OBNFb͋Γ͕ͱ͏σʔ` TIPQBFPO^ \OBNFbϋοϐʔσʔ` TIPQZPLBEP^ > ^

Slide 7

Slide 7 text

%FpOFSFMBUJPOTIJQCZ*% TUBUF\ TIPQT<\JE OBNFbΠΦϯ`^ \JE OBNFbϤʔΧಊ`^> EJTDPVOUT< \OBNFb͓٬༷ײँσʔ` TIPQ@JE^ \OBNFb͋Γ͕ͱ͏σʔ` TIPQ@JE^ \OBNFbϋοϐʔσʔ` TIPQ@JE^ > ^

Slide 8

Slide 8 text

(FUUJOHTIPQOBNFGSPN EJTDPVOU w EJTDPVOUTIPQOBNF w HFU4IPQ#Z*E EJTDPVOUTIPQ@JE OBNF 3FGFSFODFɹ *%ɹ

Slide 9

Slide 9 text

3FGFSFODFXBZ w 6OEFSTUBOEBCMFDPEF w /PHFUUFSSFRVJSFE

Slide 10

Slide 10 text

4UBUFQFSTJTUFODF QSPCMFN

Slide 11

Slide 11 text

6TJOH-PDBM4UPSFHF BTTUBUFTUPSF

Slide 12

Slide 12 text

3FGFSFODFPCKFDUJT SFQMBDFEUPWBMVF TUBUF\ TIPQT<\OBNFbBFPO`^ \OBNFbZPLBEP`^> EJTDPVOUT< \OBNFb͓٬༷ײँσʔ` TIPQ\OBNFbBFPO`^^ \OBNFb͋Γ͕ͱ͏σʔ` TIPQ\OBNFbBFPO`^^ \OBNFbϋοϐʔσʔ` TIPQ\OBNFbZPLBEP`^^ > ^

Slide 13

Slide 13 text

3FGFSFODFSFDPOTUSVDUJT OFFEFE var storage = JSON.parse localStorage.getItem bkey' var shops = new Map storage.shops.map i => for var discount of storage.discounts { discount.shop = shops.get discount.shop.id } this.replaceState Object.assign state storage

Slide 14

Slide 14 text

$PODMVTJPO w 3FMBUJPOTIJQTPGNFNCFSTPG4UBUFDBOCF SFQSFTFOUFEVTJOHSFGFSFODFT w #VUDPOTJEFSBUJPOGPSQFSTJTUFODFTUPSFJT OFDFTTBSZ