随着组件的细化，会出现多组件状态共享的情况。Vuex肯定能解决这种问题。但是，正如Vuex的官方文档所说，如果应用程序不够大，最好不要使用它，以避免繁琐和冗余的代码。今天我们介绍Vue.JS2.6中新加入的Observable api，通过使用这个api，可以处理一些简单的跨组件数据状态共享的情况。

先看官网的描述，如下图

使用Observable()方法设置监控属性，可以监控viewModule中属性值的变化，从而动态改变元素中的值。监视属性的类型是不变的，但它是一个函数，可以通过向viewModule对象中的属性返回一个函数来进行监视。

说到这里，让我们试着用一个实际的例子来说明：

设置一个简单的脚手架，在项目的src目录中设置store.js，在组件中使用提供的store和突变方法，其他组件可以用同样的方式使用，这样多个组件可以共享数据状态。

首先，创建一个store.js，它包含一个store和一个突变，分别用于指向数据和处理方法。

//store.jsimport Vue来自“Vue”；export let store=vue . observatory({ count :0，name : ' Lisi ' })；导出let突变={ setCount(count){ store . count=count；}，changeName(name){ store . name=name；}}

然后在组件Home.vue中引用它，并在组件中使用数据和方法：

//Home.vue模板div class=' container ' home-header/home-header button @ click=' setCount(count 1)' 1/button @ click=' setCount(count-1)'-1/In button div store，count:{ { count } }/div button @ click=' changename(name 1)'父页面修改名称/button divstore，name:{ { name } }/div router-link to='/detail ' H5跳转到详细信息页面/H5/router-link/div/模板脚本导入HomeHeader from './components/HomeHeader ' import { store，Variations } from ' @/store ' export default { data(){ return { name 1: ' home page name } }，components: {homeheader}，computed : { count(){ return store . count }，name(){ return store.name } }，methods : { setcount : mutations . setcount，changename : mutations . changename } }/script

然后定义一个子页面来观察数据：

//detail . vuetemplate div class=' detail ' detail-header/detail-header button @ click=' change name(name 2)'子页修改名称/按钮名称：{{name}}/p/div/模板脚本导入DetailHeader from './components/detail header ' import { store，Variations } from ' @/store ' export default { components 3360 { detail header }，data(){ return { name 2: ' name ' }，computed : { name(){ return store . name } }，methods : { changename 3360 Variations . changename } }的子页/脚本如下所示：

我们只需点击按钮，在下一个商店更改数据。效果如下：

最后，如果当前项目的Vue版本低于2.6，那么如果要使用Vue.observable()，就必须升级vue和vue-template-编译器。两个版本都需要同步。如果项目没有同步，将会报告一个错误。

//升级vue版本npm更新vue -S或纱线添加vue-snpm更新vue-模板-编译器-d或纱线添加vue-模板-编译器-D摘要

以上是边肖介绍的使用Vue.observable()进行状态管理的示例代码的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！