這篇文章給大家分享的是有關(guān)怎么使用Vue.observable()進(jìn)行狀態(tài)管理的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供三明企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為三明眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

先看下官網(wǎng)描述，如下圖

 

observable()方法，用于設(shè)置監(jiān)控屬性，這樣就可以監(jiān)控viewModule中的屬性值的變化，從而就可以動(dòng)態(tài)的改變某個(gè)元素中的值，監(jiān)控屬性的類型不變量而是一個(gè)函數(shù)，通過返回一個(gè)函數(shù)給viewModule對(duì)象中的屬性，從而來(lái)監(jiān)控該屬性。

說(shuō)那么多，我們?cè)趯?shí)際例子中嘗試玩一下：

搭建個(gè)簡(jiǎn)單腳手架，在項(xiàng)目src目錄下建立store.js，在組件里使用提供的 store和 mutation方法，同理其它組件也可以這樣使用，從而實(shí)現(xiàn)多個(gè)組件共享數(shù)據(jù)狀態(tài)。

首先創(chuàng)建一個(gè) store.js，包含一個(gè) store和一個(gè) mutations，分別用來(lái)指向數(shù)據(jù)和處理方法。

//store.js
import Vue from 'vue';

export let store =Vue.observable({count:0,name:'李四'});
export let mutations={
  setCount(count){
    store.count=count;
  },
  changeName(name){
    store.name=name;
  }
}

然后在組件Home.vue中引用，在組件里使用數(shù)據(jù)和方法：

//Home.vue
  
  

 

再定義一個(gè)子頁(yè)面觀察數(shù)據(jù)：

//Detail.vue
 

子頁(yè)面顯示如圖：

 

我們簡(jiǎn)單點(diǎn)擊下按鈕，改變下store中的數(shù)據(jù)，效果如下：

 

最后補(bǔ)充一點(diǎn)，就是如果當(dāng)前項(xiàng)目vue版本低于2.6，要使用Vue.observable()，就必須要升級(jí)，升級(jí) vue 和 vue-template-compiler，兩者的版本需要同步，如果不同步項(xiàng)目會(huì)報(bào)錯(cuò)。

//升級(jí)vue版本
npm update vue -S 或者 yarn add vue -S
npm update vue-template-compiler -D 或者 yarn add vue-template-compiler -D

感謝各位的閱讀！關(guān)于“怎么使用Vue.observable()進(jìn)行狀態(tài)管理”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+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)景需求。

新聞標(biāo)題：怎么使用Vue.observable()進(jìn)行狀態(tài)管理-創(chuàng)新互聯(lián)
文章路徑：http://weahome.cn/article/dojdgg.html