observable

Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象

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

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

使用示例:

import Vue from 'vue'
// 将其方法挂载到 Vue 上
export let state = Vue.observable({
    name: '小顾',
    age: 17
})

// 方法
export let mutations = {
    ChangeName (name) {
        state.name = name
    },
    AetAge (age) {
        state.age = age
    }
}

<template>
  <div>
    <p>姓名: {{age}}</p>
    <p>年龄: {{name}}</p>
    <button @click="changeName('小强')">改变姓名</button>
    <br>
    <button @click="changeAge(12)">改变年龄</button>
  </div>
</template>

  methods: {
    // changeName: mutations.ChangeName,
    changeAge : mutations.AetAge,
    changeName(q) {
      mutations.ChangeName(q)
    }
  },

  computed: {
    name() {
      return state.name
    },
    age () {
      return state.age
    }
  }