vue.observable()

1、observable 是什么

observable翻译过来可以理解成 可观察的

vue 中的定义

返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：

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

Vue.observable({ count : 1})

2、使用场景

在非父子组件通信是， 通常可以使用vuex 或者bus 但是使用的功能不太复杂 使用这两个又有点繁琐，这是observable 就是个一个很好的选择

创建一个js文件

import Vue from ‘vue’
export const state = Vue。observable({
	user:{name:'龚'}
})

export const mutations = {
	updateUser(payload) {
		state.user = Object.assign({},payload)	
	}
}

在页面中使用

<template>
  <div>
    <button @click="changeUser">改变用户</button>
  </div>
</template>

import { state, mutations } from '../store.js'
export default {

	computed:{
		user(){
			return state.user
		}
	},
	
	methods:{
		// 调用murations 中的方法更新数据
		changeUser(){
			mutations.update.user({name:'晔'})
		}	
	}
}