Vue.observable——小型vuex

1. Vue.observable在Vue中的定义：

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

2. 为什么要使用Vue.observable

在非父子通信的场景下，有很多的选择：事件总线，mitt.js，vuex等等，但是一些小的组件之间通信的功能用这些又太过繁琐，所以可以考虑使用Vue.observable

3. 使用方法：

• 在store文件夹下创建一个js文件

// 引入vue
import Vue from 'vue' 
// 创建state对象，使用observable让state对象可响应
export let state = Vue.observable({ 
  num: 0
})
// 创建对应的方法
export let mutations = {
  addNum(step) {
    state.num += step 
  }
}

• 在.vue文件中直接使用即可

<template>
  <div>
    <p>{{ num }}</p>
    <button @click="addNum(1)">add</button>
  </div>
</template> 
import { state, mutations } from '@/store
export default {
  // 在计算属性中拿到值
  computed: {
    num() {
      return state.num 
    }
  }, 
  // 调用mutations里面的方法，更新数据
  methods: {
    addNum: mutations.addNum
  } 
}