# Vue.observable() **隨著組件的細化，就會遇到多組件狀態共享的情況， Vuex當然可以解決這類問題，不過就像 Vuex官方文檔所說的，如果應用不夠大，為避免代碼繁瑣冗余，最好不要使用它****通過使用這個 api 我們可以應對一些簡單的跨組件數據狀態共享的情況。** 類似于vuex observable()方法，用于設置監控屬性，這樣就可以監控viewModule中的屬性值的變化，從而就可以動態的改變某個元素中的值，監控屬性的類型不變量而是一個函數，通過返回一個函數給viewModule對象中的屬性，從而來監控該屬性。 ***** 1.創建一個store文件 ```js //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; } } ``` ***** 2.在父組件中使用store ``` <template> <div class="container"> <button @click="setCount(count+1)">+1</button> <button @click="setCount(count-1)">-1</button> <div>store中count：{{count}}</div> <button @click="changeName('王偉')">父頁面修改name</button> <div>store中name：{{name}}</div> <my-demo></my-demo> </div> </template> <script> import MyDemo from '../components/demo' import {store,mutations} from '../store/store' export default { components:{ MyDemo }, computed:{ count(){ return store.count }, name(){ return store.name } }, methods:{ setCount:mutations.setCount, changeName:mutations.changeName } } </script> ``` ***** 3.在子組件中使用 ``` <template> <div class="detail"> <p>子組件</p> <button @click="changeName(name2)">子頁面修改name</button> <p>store中name：{{name}}</p> </div> </template> <script> import {store,mutations} from '../store/store' export default { data(){ return { name2:'子頁的name' } }, computed:{ name(){ return store.name } }, methods:{ changeName:mutations.changeName } } </script> ```