Vue局部組件數據共享Vue.observable()的使用
隨著組件的細化,就會遇到多組件狀態共享的情況, Vuex當然可以解決這類問題,不過就像 Vuex官方文檔所說的,如果應用不夠大,為避免代碼繁瑣冗餘,最好不要使用它,今天我們介紹的是 vue.js 2.6 新增加的 Observable API ,通過使用這個 api 我們可以應對一些簡單的跨組件數據狀態共享的情況。
創建store對象
首先創建一個 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; } }
把store對象應用在不同組件中
然後再在組件中使用該對象
//obserVable.vue <template> <div> <h1>跨組件數據狀態共享 obserVable</h1> <div> <top></top> <bottom></bottom> </div> </div> </template> <script> import top from './components/top.vue'; import bottom from './components/bottom.vue'; export default { name: 'obserVable', components: { top, bottom } }; </script> <style scoped> </style>
//組件a <template> <div class="bk"> <span ><h1>a組件</h1> {{ count }}--{{ name }}</span > <button @click="setCount(count + 1)">當前a組件中+1</button> <button @click="setCount(count - 1)">當前a組件中-1</button> </div> </template> <script> import { store, mutations } from '@/store'; export default { computed: { count() { return store.count; }, name() { return store.name; } }, methods: { setCount: mutations.setCount, changeName: mutations.changeName } }; </script> <style scoped> .bk { background: lightpink; } </style>
//組件b <template> <div class="bk"> <h1>b組件</h1> {{ count }}--{{ name }} <button @click="setCount(count + 1)">當前b組件中+1</button> <button @click="setCount(count - 1)">當前b組件中-1</button> </div> </template> <script> import { store, mutations } from '@/store'; export default { computed: { count() { return store.count; }, name() { return store.name; } }, methods: { setCount: mutations.setCount, changeName: mutations.changeName } }; </script> <style scoped> .bk { background: lightgreen; } </style>
顯示效果
到此這篇關於Vue局部組件數據共享Vue.observable()的使用的文章就介紹到這瞭,更多相關Vue.observable() 數據共享內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!