隨著組件的細(xì)化，就會(huì)遇到多組件狀態(tài)共享的情況， Vuex當(dāng)然可以解決這類問(wèn)題，不過(guò)就像 Vuex官方文檔所說(shuō)的，如果應(yīng)用不夠大，為避免代碼繁瑣冗余，最好不要使用它，今天我們介紹的是 vue.js 2.6 新增加的 Observable API ，通過(guò)使用這個(gè) api 我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)據(jù)狀態(tài)共享的情況。
先看下官網(wǎng)描述，如下圖
observable()方法，用于設(shè)置監(jiān)控屬性，這樣就可以監(jiān)控viewModule中的屬性值的變化，從而就可以動(dòng)態(tài)的改變某個(gè)元素中的值，監(jiān)控屬性的類型不變量而是一個(gè)函數(shù)，通過(guò)返回一個(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.jsimport 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 <template> <div class="container"> <home-header></home-header> <button @click="setCount(count+1)">+1</button> <button @click="setCount(count-1)">-1</button> <div>store中count：{{count}}</div> <button @click="changeName(name1)">父頁(yè)面修改name</button> <div>store中name：{{name}}</div> <router-link to="/detail" ><h5>跳轉(zhuǎn)到詳情頁(yè)</h5> </router-link> </div> </template> <script> import HomeHeader from '../components/HomeHeader' import {store,mutations} from '@/store' export default { data () { return { name1:'主頁(yè)的name' } }, components: { HomeHeader }, computed:{ count(){ return store.count }, name(){ return store.name } }, methods:{ setCount:mutations.setCount, changeName:mutations.changeName } } </script> 
再定義一個(gè)子頁(yè)面觀察數(shù)據(jù)：
//Detail.vue<template> <div class="detail"> <detail-header></detail-header> <button @click="changeName(name2)">子頁(yè)面修改name</button> <p>store中name：{{name}}</p> </div> </template> <script> import DetailHeader from '../components/DetailHeader' import {store,mutations} from '@/store' export default { components: { DetailHeader } , data(){ return { name2:'子頁(yè)的name' } }, computed:{ name(){ return store.name } }, methods:{ changeName:mutations.changeName } } </script>子頁(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 -Snpm update vue-template-compiler -D 或者 yarn add vue-template-compiler -D
總結(jié)
以上所述是小編給大家介紹的使用Vue.observable()進(jìn)行狀態(tài)管理的實(shí)例代碼詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
