标签：处理 ted 组件 单点 多个 官方 code 动态 状态
随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。
observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性的类型不变量而是一个函数，通过返回一个函数给viewModule对象中的属性，从而来监控该属性。
说那么多，我们在实际例子中尝试玩一下：
搭建个简单脚手架，在项目src目录下建立store.js，在组件里使用提供的 store和 mutation方法，同理其它组件也可以这样使用，从而实现多个组件共享数据状态。
//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中的数据，效果如下：
源码（src\core\global-api\index.js）：
Vue.observable = <T>(obj: T): T => { observe(obj) return obj }
转自：https://blog.csdn.net/sunhonghui9527/article/details/107363222
标签：处理 ted 组件 单点 多个 官方 code 动态 状态
原文地址：https://www.cnblogs.com/vickylinj/p/14402645.html
