说明

Vue.observable为v2.6.0版本中新增的一个组件通信方案，

用法

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器

举例

点击index.vue中的保存按钮，触发table.vue中数据的更新

store.js

import Vue from 'vue'

export const state = Vue.observable({
		test:566666
})
export const mutations = {
	setTest(val){
		state.test = val
	}
}

index.vue组件中触发

<template>
	<div>
		<el-button @click="toSave">保存</el-button>
		<e-form />
	</div>
</template>

<script>
	import eForm from './model/form.vue'
	import {state, mutations} from './store.js'
	export default {
		name:'table_form',
		components:{eForm},
		computed:{
			test(){
				return state.test
			}
		},
		methods:{
			setTest:mutations.setTest,
			toSave(){
				this.setTest(44)
			}
		}
	}
</script>

form.vue组件中响应改变

<template>
	<el-tag>{{test}}</el-tag>
</template>

<script>
	import {state} from '../store.js'
	export default {
		name:'eForm',
		computed:{
			test(){
				return state.test
			}
		}
	}
</script>