# 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> ```