Vue.observable

用法：
让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景
用于数据共享，当十几个组件同时共用一套数据时候，把数据独立抽离出来，方便维护也可以实现多个组件之间数据的共享和更新

先建一个store.js

import Vue from 'vue'
export const state = Vue.observable({
  screenCars: {},//定义state.screenCars
})
export const mutations = {
  updateScreenCars (payload) {//用于设置监控属性,可以监控viewModule中的属性值的变化
    state.screenCars = Object.assign({}, payload)//payload指的是{a:2},传入的参数
  },
}

在页面里引入

<template>
    <div>
        <button @click="toSave">保存</button>
    </div>
</template>

<script>
import {state, mutations} from '../store/store'//导入模块
export default {
  name: 'extend',
  computed: {
    screenCars() {
      return state.screenCars//返回screenCars的状态
    },
  },
  methods: {
    setTest: mutations.updateScreenCars ,//改变状态
    toSave () {
      this.setTest({a:2})//设置状态
    },
  },
}
</script>