本文小編為大家詳細介紹“怎么實現(xiàn)vuex與組件data之間的數(shù)據(jù)更新”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“怎么實現(xiàn)vuex與組件data之間的數(shù)據(jù)更新”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)臨城,十多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

問題

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

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

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

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

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

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

解決

那么如果我們必須想要在 data 上綁定 state 中的數(shù)據(jù)，讓 state 去驅(qū)動 data 發(fā)生改變，那我們該如何做呢？

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

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

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

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

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

讀到這里，這篇“怎么實現(xiàn)vuex與組件data之間的數(shù)據(jù)更新”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。