我们项目会将公共的组件拆分开来以便复用，可能一个页面就包含了几个组件，随着组件的细化，经常会遇到多个组件公用一个相同的数据，也就是需要数据共享的情况；
平常我们会用父子组件props、$emit, eventBus或vuex来解决，但是前两种传值传来传去太繁琐了，vuex的话引用官方的话：“如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex “；

所以我们项目不太大，而且需要多个组件共享数据的话，这里就推荐一下 Vue.observable(Object)，可以把它当做为一个小型的 vuex

Vue.observable是什么？

官方解释

就是传入一个对象，可以让这个对象变为一个响应式的对象

怎么使用Vue.observable

假设我们Home页面有一个商品 兰陵王 价格为 18888 金币，About页面也有这个商品，它们的价格应该是同步更新的，比如Home页面触发了事件给这个商品打了五折，那么About页面价格也应该变为五折；

1. 在src文件夹下面新建store文件夹,再在store下面新建index.js（根据自己习惯）

// 目录：src/store/index.js

// 因为是vue的api，所以先引入vue
import Vue from 'vue';

// 导出一个被observable包裹的可响应对象state
export let state = Vue.observable({
    
    
    price: 18888,
})

// 导出修改state方法的对象mutations
export let mutations = {
    
    
    setPrice(price) {
    
    
        state.price = price;
    }
}

2. 页面使用

src/views/Home.vue

<template>
  <div class="home">
      <h2>Home页面</h2>
      <h4>兰陵王价格：{
    
    {
    
     price }} 金币</h4>
      <button @click="changePrice(newPrice)">Home页面五折按钮</button>
  </div>
</template>

<script>
import {
    
     state, mutations } from '../store'

export default {
    
    
  data() {
    
    
    return {
    
    
      newPrice: state.price * 0.5
    }
  },
  // 在计算属性中取值
  computed: {
    
    
    price() {
    
    
      return state.price;
    }
  },
  methods: {
    
    
    // 调用mutation的方法
    changePrice: mutations.setPrice,
  }
}
</script>

src/views/About.vue

<template>
  <div class="about">
      <h2>About页面</h2>
      <h4>兰陵王价格：{
    
    {
    
     price }} 金币</h4>
  </div>
</template>

<script>
import {
    
     state } from '../store'

export default {
    
    
  // 在计算属性中取值
  computed: {
    
    
    price() {
    
    
      return state.price;
    }
  }
}
</script>

页面初始化是这样的

点击了Home页面的五折按钮, About页面的价格也会跟着改变，就达到了我们数据共享的效果。