使用Vue.observable()進(jìn)行狀態(tài)管理的實(shí)例代碼詳解
隨著組件的細(xì)化，就會(huì)遇到多組件狀態(tài)共享的情況， Vuex當(dāng)然可以解決這類問題，不過就像 Vuex官方文檔所說的，如果應(yīng)用不夠大，為避免代碼繁瑣冗余，最好不要使用它，今天我們介紹的是 vue.js 2.6 新增加的 Observable API ，通過使用這個(gè) api 我們可以應(yīng)對一些簡單的跨組件數(shù)據(jù)狀態(tài)共享的情況。
先看下官網(wǎng)描述，如下圖
observable()方法，用于設(shè)置監(jiān)控屬性，這樣就可以監(jiān)控viewModule中的屬性值的變化，從而就可以動(dòng)態(tài)的改變某個(gè)元素中的值，監(jiān)控屬性的類型不變量而是一個(gè)函數(shù)，通過返回一個(gè)函數(shù)給viewModule對象中的屬性，從而來監(jiān)控該屬性。
說那么多，我們在實(shí)際例子中嘗試玩一下：
搭建個(gè)簡單腳手架，在項(xiàng)目src目錄下建立store.js，在組件里使用提供的 store和 mutation方法，同理其它組件也可以這樣使用，從而實(shí)現(xiàn)多個(gè)組件共享數(shù)據(jù)狀態(tài)。
首先創(chuàng)建一個(gè) store.js，包含一個(gè) store和一個(gè) mutations，分別用來指向數(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
<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)">父頁面修改name</button>
<div>store中name：{{name}}</div>
<router-link to="/detail" ><h5>跳轉(zhuǎn)到詳情頁</h5> </router-link>
</div>
</template>
<script>
import HomeHeader from '../components/HomeHeader'
import {store,mutations} from '@/store'
export default {
data () {
return {
name1:'主頁的name'
}
},
components: {
HomeHeader
},
computed:{
count(){
return store.count
},
name(){
return store.name
}
},
methods:{
setCount:mutations.setCount,
changeName:mutations.changeName
}
}
</script>
再定義一個(gè)子頁面觀察數(shù)據(jù)：
//Detail.vue
<template>
<div class="detail">
<detail-header></detail-header>
<button @click="changeName(name2)">子頁面修改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:'子頁的name'
}
},
computed:{
name(){
return store.name
}
},
methods:{
changeName:mutations.changeName
}
}
</script>
子頁面顯示如圖：
我們簡單點(diǎn)擊下按鈕，改變下store中的數(shù)據(jù)，效果如下：
最后補(bǔ)充一點(diǎn)，就是如果當(dāng)前項(xiàng)目vue版本低于2.6，要使用Vue.observable()，就必須要升級，升級 vue 和 vue-template-compiler，兩者的版本需要同步，如果不同步項(xiàng)目會(huì)報(bào)錯(cuò)。
//升級vue版本 npm update vue -S 或者 yarn add vue -S npm update vue-template-compiler -D 或者 yarn add vue-template-compiler -D
總結(jié)
以上所述是小編給大家介紹的使用Vue.observable()進(jìn)行狀態(tài)管理的實(shí)例代碼詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue組件間的通信pubsub-js實(shí)現(xiàn)步驟解析
這篇文章主要介紹了Vue組件間的通信pubsub-js實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
iview的table組件自帶的過濾器實(shí)現(xiàn)
這篇文章主要介紹了iview的table組件自帶的過濾器實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
淺談VUE項(xiàng)目打包后運(yùn)行頁面一片白問題
本文主要介紹了淺談VUE項(xiàng)目打包后運(yùn)行頁面一片白問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2023-01-01
VUE?Element修改el-input和el-select長度的具體步驟
這篇文章主要給大家介紹了關(guān)于VUE?Element修改el-input和el-select長度的具體步驟,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue封裝一個(gè)日歷組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue 3 作為前端開發(fā)中一個(gè)非常流行的框架,在錯(cuò)誤處理方面提供了靈活和強(qiáng)大的能力,本文將深入介紹在 Vue 3 中如何捕獲和處理錯(cuò)誤,包括組件級的錯(cuò)誤處理、全局錯(cuò)誤處理以及如何與異常日志系統(tǒng)集成,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue關(guān)于訪問外鏈?zhǔn)〉膯栴}，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
在項(xiàng)目中封裝axios的實(shí)戰(zhàn)過程
這篇文章主要給大家介紹了關(guān)于如何在項(xiàng)目中封裝axios的相關(guān)資料,axios 請求的封裝,無非是為了方便代碼管理,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue中使用el-dropdown方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08