$30 off During Our Annual Pro Sale. View Details »

How to define the relationship in vuex's state

How to define the relationship in vuex's state

When you use vuex state, how to define relationship between state objects?

Tetsuya Tatsumi

March 09, 2018
Tweet

More Decks by Tetsuya Tatsumi

Other Decks in Programming

Transcript

  1. )PXUPEFpOFUIF SFMBUJPOTIJQJOWVFYT TUBUF (PUBOEBKTJO/FYUCFBU !EPLFDIJO

  2. ˏEPLFDIJO w .JEEMF"HFENBOXIPMJLFTUPNBLFXFC BQQMJDBUJPO CVUUFDIOPMPHZMFWFMJTʜ

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

  4. 7VFY It serves as a centralized store for all the

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

  6. %FpOFSFMBUJPOTIJQCZ SFGFSFODF TUBUF\ TIPQT<BFPO ZPLBEP>  EJTDPVOUT< \OBNFb͓٬༷ײँσʔ` TIPQBFPO^ 

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

    TIPQ@JE^  \OBNFb͋Γ͕ͱ͏σʔ` TIPQ@JE^  \OBNFbϋοϐʔσʔ` TIPQ@JE^ > ^
  8. (FUUJOHTIPQOBNFGSPN EJTDPVOU w EJTDPVOUTIPQOBNF w HFU4IPQ#Z*E EJTDPVOUTIPQ@JE OBNF 3FGFSFODFɹ *%ɹ

  9. 3FGFSFODFXBZ w 6OEFSTUBOEBCMFDPEF w /PHFUUFSSFRVJSFE

  10. 4UBUFQFSTJTUFODF QSPCMFN

  11. 6TJOH-PDBM4UPSFHF BTTUBUFTUPSF

  12. 3FGFSFODFPCKFDUJT SFQMBDFEUPWBMVF TUBUF\ TIPQT<\OBNFbBFPO`^ \OBNFbZPLBEP`^>  EJTDPVOUT< \OBNFb͓٬༷ײँσʔ` TIPQ\OBNFbBFPO`^^ 

    \OBNFb͋Γ͕ͱ͏σʔ` TIPQ\OBNFbBFPO`^^  \OBNFbϋοϐʔσʔ` TIPQ\OBNFbZPLBEP`^^ > ^
  13. 3FGFSFODFSFDPOTUSVDUJT OFFEFE var storage = JSON.parse localStorage.getItem bkey' var shops

    = new Map storage.shops.map i => <i.id i> for var discount of storage.discounts { discount.shop = shops.get discount.shop.id } this.replaceState Object.assign state storage
  14. $PODMVTJPO w 3FMBUJPOTIJQTPGNFNCFSTPG4UBUFDBOCF SFQSFTFOUFEVTJOHSFGFSFODFT w #VUDPOTJEFSBUJPOGPSQFSTJTUFODFTUPSFJT OFDFTTBSZ