這里我們要介紹基于vue開(kāi)發(fā)出來(lái)的一個(gè)工具,用于簡(jiǎn)化父子間的數(shù)據(jù)傳遞,沒(méi)錯(cuò),就是vuex,由于是工具,重在使用,我們了解了它的概念之后,重點(diǎn)方在使用步驟上

image.png

https://vuex.vuejs.org/
https://vuex.vuejs.org/zh/guide/

0.重點(diǎn)

Vuex通過(guò)Store構(gòu)造函數(shù)創(chuàng)建倉(cāng)庫(kù)對(duì)象保存共享的數(shù)據(jù),在需要用到的組件中注冊(cè),就能通過(guò)$store.state.數(shù)據(jù)名稱訪問(wèn)

1.bugs

image.png

構(gòu)造函數(shù)創(chuàng)建對(duì)象忘記加new

image.png

image.png

image.png

3.出現(xiàn)多余字符造成界面出現(xiàn)差錯(cuò)

image.png

4.id寫(xiě)錯(cuò)

image.png

image.png

一.什么是Vuex

vuex是Vue配套的公共數(shù)據(jù)管理工具,它可以保存共享的數(shù)據(jù),方便程序中任何組件都可以很方便的調(diào)用
vuex中只保存需要共享的數(shù)據(jù),也就是需要多個(gè)組件共同使用的數(shù)據(jù),比如:我們執(zhí)行加入購(gòu)物車(chē)操作,購(gòu)物車(chē)標(biāo)識(shí)右上角的數(shù)字會(huì)加一,表明購(gòu)物車(chē)組件中的count和加入購(gòu)物車(chē)組件中的count是共享的,應(yīng)該放在vuex中

二.如何使用

1.導(dǎo)入vuex
我們?cè)诠倬W(wǎng)直接拷貝源代碼到j(luò)s文件夾下的vuex.js文件中,并在Vue導(dǎo)入之后導(dǎo)入,因?yàn)樗且蕾囉赩ue的
2.創(chuàng)建一個(gè)倉(cāng)庫(kù)
new Vuex.Store()
3.通過(guò)數(shù)據(jù)倉(cāng)庫(kù)的state屬性保存需要共享的數(shù)據(jù)
給上面的Store構(gòu)造函數(shù)傳遞參數(shù){
state:{
msg:"佩奇"
}}
4.將數(shù)據(jù)倉(cāng)庫(kù)對(duì)象綁定到Vue上
store:倉(cāng)庫(kù)名稱
5.通過(guò){{[this.]$store.state.msg}}訪問(wèn)vuex共享倉(cāng)庫(kù)中的數(shù)據(jù)

三.代碼驗(yàn)證

image.png

image.png

image.png