Vue中的Observable()

随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。

简单来说，复杂的项目用vuex，简单点的项目用Vue.observable()。

定义：

observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性的类型不是变量而是一个函数，通过返回一个函数给viewModule对象中的属性，从而来监控该属性。

viewModule对象的形式有两种，一种可以是var obj={};的形式，另一种是通过new 实例化的对象，比如，function myclass1(){this.name=""},类，实例化对象var obj=new myclass1();

该方法有两种用法，读和写：

1.读

var b=ko.observable();//该方法会读取b属性的当前值,并设置该属性为监控属性，实际上就是把一个函数赋值给该属性。

2.写

var b=ko.observable(“数据内容”);//该方法会设置b属性的当前值，并设置该属性为监控属性，实际上就是把一个函数赋值给该属性，通过该方法可以让属性成为监控属性，监测属性值的变化，监控属性是设置在viewModule对象中的属性中的。

当设置了监控属性后属性，成为双向绑定，即改变两者的一方的内容，都会改变另一方的内容，两者是相互的。

实例：

1.创建store.js 最好和main.js平级创建文件

import Vue from 'vue'

export const store = Vue.observable({
  name: '李四'
})
export const mutations = {
  setName (data) {
    store.name = data
  }
}

2.在两个组件中调用改写 （如果全局都有使用，也可在mian.js通过Vue.pototype来全局挂载，不用每个组件都引入）

<template>
  <el-row>
    <span @click="findClick">{{data}}</span>
  </el-row>
</template>

<script>
import {store, mutations} from '@/store.js'
export default {
  name: 'mainView',
  data() {
    return {
      data: ''
    }
  },
  mounted() {
    this.data = store.name // 引入store.js 通过定义的store直接获取
  },
  methods: {
    findClick() {
      this.$router.push({path: '/login'})
      mutations.setName('我改了') // 引入store.js 通过定义的mutations下边的方法修改
    }
  }
}
</script>

Vue.observable()不适用于2.6以下的版本。