成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),陸港企業(yè)網(wǎng)站建設(shè),陸港品牌網(wǎng)站建設(shè),網(wǎng)站定制,陸港網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,陸港網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

小編給大家分享一下如何實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)更新，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

問題

我們都知道，在Vue組件中，data部分的數(shù)據(jù)與視圖之間是可以同步更新的，假如我們更新了data中的數(shù)據(jù)，那么視圖上的數(shù)據(jù)就會(huì)被同步更新，這就是Vue所謂的數(shù)據(jù)驅(qū)動(dòng)視圖思想。

當(dāng)我們使用Vuex時(shí)，我們也可以通過在視圖上通過 $store.state.[DataKey] 來獲取Vuex中 state 的數(shù)據(jù)，且當(dāng) state 中的數(shù)據(jù)發(fā)生變化時(shí)，視圖上的數(shù)據(jù)也是可以同步更新的，這似乎看起來很順利。

但是當(dāng)我們想要通過將 state 中的數(shù)據(jù)綁定到Vue組件的 data 上，然后再在視圖上去調(diào)用 data ，如下：

那么我們就會(huì)發(fā)現(xiàn)，當(dāng)我們?nèi)ジ淖?state 中的 userInfo 時(shí)，視圖是不會(huì)更新的，相對(duì)應(yīng)的 data 中的 userInfo 也不會(huì)被更改，因?yàn)檫@種調(diào)用方式是非常規(guī)的。

當(dāng)Vue在組件加載完畢前，會(huì)將 data 中的所有數(shù)據(jù)初始化完畢，之后便只會(huì)被動(dòng)改變數(shù)據(jù)。然而等組件數(shù)據(jù)初始化完畢之后，即使 state 中的數(shù)據(jù)發(fā)生了改變， data 中的數(shù)據(jù)與其并非存在綁定關(guān)系，data 僅僅在數(shù)據(jù)初始化階段去調(diào)用了 state 中的數(shù)據(jù)，所以 data 中的數(shù)據(jù)并不會(huì)根據(jù) state 中的數(shù)據(jù)發(fā)生改變而改變。

所以如果想在視圖上實(shí)現(xiàn)與 state 中的數(shù)據(jù)保持同步更新的話，只能采用以下方式：

解決

那么如果我們必須想要在 data 上綁定 state 中的數(shù)據(jù)，讓 state 去驅(qū)動(dòng) data 發(fā)生改變，那我們?cè)撊绾巫瞿兀?/p>

我們可以嘗試以下兩中方法：

1. 使用computed屬性去獲取state中的數(shù)據(jù)

這種方式其實(shí)并非是去調(diào)用了 data 中的數(shù)據(jù)，而是為組件添加了一個(gè)計(jì)算 computed 屬性。computed 通常用于復(fù)雜數(shù)據(jù)的計(jì)算，它實(shí)際上是一個(gè)函數(shù)，在函數(shù)內(nèi)部進(jìn)行預(yù)算后，返回一個(gè)運(yùn)算結(jié)果，同時(shí)它有一個(gè)重要的特性：當(dāng)在它內(nèi)部需要進(jìn)行預(yù)算的數(shù)據(jù)發(fā)生改變后，它重新進(jìn)行數(shù)據(jù)運(yùn)算并返回結(jié)果。 所以，我們可以用 computed 去返回 state 中的數(shù)據(jù)，當(dāng) state 中的數(shù)據(jù)發(fā)生改變后，computed 會(huì)感知到，并重新獲取 state 中的數(shù)據(jù)，并返回新的值。

2. 使用watch監(jiān)聽state中的數(shù)據(jù)

這種方式就很好理解了，就是通過組件的 watch 屬性，為 state 中的某一項(xiàng)數(shù)據(jù)添加一個(gè)監(jiān)聽，當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候觸發(fā)監(jiān)聽事件，在監(jiān)聽事件內(nèi)部中去更改 data 中對(duì)應(yīng)的數(shù)據(jù)，即可變相的讓 data 中的數(shù)據(jù)去根據(jù) state 中的數(shù)據(jù)發(fā)生改變而改變。

以上是“如何實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)更新”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞名稱：如何實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)更新-創(chuàng)新互聯(lián)
URL標(biāo)題：http://weahome.cn/article/cegigc.html