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