随着组件的细化，很多时候都需要处理组件状态共享的情况， Vuex可以轻松解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，接下来介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。
-
简介：官网描述
Observable .png
observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性则通过返回一个函数给viewModule对象中的属性，从而来监控该属性。返回的对象可以直接用于渲染函数methods和计算属性computed内，并且会在发生改变时触发相应的更新。
创建store.js文件
import Vue from 'vue'
export const state = Vue.observable({
screenCars: {},
})
export const mutations = {
updateScreenCars (payload) {
state.screenCars = Object.assign({}, payload)
},
}
index.vue组件中触发：
<template>
<div>
<el-button @click="toSave">保存</el-button>
</div>
</template>
<script>
import {state, mutations} from './store.js'
export default {
name: 'table_form',
computed: {
screenCars() {
return state.screenCars
},
},
methods: {
setTest: mutations.updateScreenCars ,
toSave () {
this.setTest({a:1})
},
},
}
</script>
