成都創新互聯公司是一家集網站建設,陸港企業網站建設,陸港品牌網站建設,網站定制,陸港網站建設報價,網絡營銷,網絡優化,陸港網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

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

問題

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

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

但是當我們想要通過將 state 中的數據綁定到Vue組件的 data 上，然后再在視圖上去調用 data ，如下：

<template>
 <div>{{userInfo}}</div> 
</template>

<script>
export default {
 data() {
 return {
  userInfo: this.$store.state.userInfo;
 };
 }
};
</script>

那么我們就會發現，當我們去改變 state 中的 userInfo 時，視圖是不會更新的，相對應的 data 中的 userInfo 也不會被更改，因為這種調用方式是非常規的。

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

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

<template>
 <div>{{$store.state.userInfo}}</div> 
</template>

解決

那么如果我們必須想要在 data 上綁定 state 中的數據，讓 state 去驅動 data 發生改變，那我們該如何做呢？

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

1. 使用computed屬性去獲取state中的數據

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

<template>
 <div>{{userInfo}}</div> 
</template>

<script>
export default {
 computed: {
 userInfo(){
  return this.$store.state.userInfo;
 }
 }
};
</script>

2. 使用watch監聽state中的數據

這種方式就很好理解了，就是通過組件的 watch 屬性，為 state 中的某一項數據添加一個監聽，當數據發生改變的時候觸發監聽事件，在監聽事件內部中去更改 data 中對應的數據，即可變相的讓 data 中的數據去根據 state 中的數據發生改變而改變。

<template>
 <div>{{userInfo}}</div> 
</template>

<script>
export default {
 data() {
 return {
  userInfo: this.$store.state.userInfo;
 };
 },
 watch: {
 "this.$store.state.userInfo"() {
  this.userInfo = this.$store.getters.getUserInfo; // 按照規范在這里應該去使用getters來獲取數據
 }
 }
};
</script>

以上是“如何實現vuex與組件data之間的數據更新”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯成都網站設計公司行業資訊頻道！

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

網頁名稱：如何實現vuex與組件data之間的數據更新-創新互聯
標題來源：http://www.2m8n56k.cn/article12/cegigc.html

成都網站建設公司_創新互聯，為您提供自適應網站、網頁設計公司、商城網站、小程序開發、服務器托管、網站導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯