使用Vue.observable()進(jìn)行狀態(tài)管理的實例代碼詳解
隨著組件的細(xì)化，就會遇到多組件狀態(tài)共享的情況， Vuex當(dāng)然可以解決這類問題，不過就像 Vuex官方文檔所說的，如果應(yīng)用不夠大，為避免代碼繁瑣冗余，最好不要使用它，今天我們介紹的是 vue.js 2.6 新增加的 Observable API ，通過使用這個 api 我們可以應(yīng)對一些簡單的跨組件數(shù)據(jù)狀態(tài)共享的情況。
先看下官網(wǎng)描述，如下圖
observable()方法，用于設(shè)置監(jiān)控屬性，這樣就可以監(jiān)控viewModule中的屬性值的變化，從而就可以動態(tài)的改變某個元素中的值，監(jiān)控屬性的類型不變量而是一個函數(shù)，通過返回一個函數(shù)給viewModule對象中的屬性，從而來監(jiān)控該屬性。
說那么多，我們在實際例子中嘗試玩一下：
搭建個簡單腳手架，在項目src目錄下建立store.js，在組件里使用提供的 store和 mutation方法，同理其它組件也可以這樣使用，從而實現(xiàn)多個組件共享數(shù)據(jù)狀態(tài)。
首先創(chuàng)建一個 store.js，包含一個 store和一個 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>
再定義一個子頁面觀察數(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>
子頁面顯示如圖：
我們簡單點擊下按鈕，改變下store中的數(shù)據(jù)，效果如下：
最后補充一點，就是如果當(dāng)前項目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
總結(jié)
以上所述是小編給大家介紹的使用Vue.observable()進(jìn)行狀態(tài)管理的實例代碼詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue+element遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue+elementUI下拉框自定義顏色選擇器方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
vue $set 實現(xiàn)給數(shù)組集合對象賦值
這篇文章主要介紹了vue $set 實現(xiàn)給數(shù)組集合對象賦值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
vue2.6.10+vite2開啟template模板動態(tài)編譯的過程
這篇文章主要介紹了vue2.6.10+vite2開啟template模板動態(tài)編譯,本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要給大家介紹了關(guān)于vue-cli配置使用Vuex的相關(guān)資料,Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,本介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式
這篇文章主要介紹了vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue路由傳參props解耦的三種方式小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
本篇文章主要介紹了vue滾動行為，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了解決vue中使用proxy配置不同端口和ip接口問題 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue實現(xiàn)多頁簽組件的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01