vue2/3搭建小型的状态管理工具

vue2版本用的是Vue.observable,但现在我用的是3版本,所以我演示用的是3版本的reactive

 首先定义一个工具js

import { reactive } from 'vue'
let obj = reactive({ num: 520 })
let add = () => {
  obj.num++
}
let edit = (newnum) => {
  obj.num = newnum
}
export {
  obj, add, edit
}

然后在两个组件中引入,他们是兄弟关系

 

 总结,主要是Vue.observable或者vue3的reactive返回一个可响应对象,你可以拿来跨组件共享一个东西