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

高山我梦口香糖

于 2022-08-17 09:15:14 发布

阅读量283

点赞数

分类专栏：技术文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/Madman528/article/details/126378391

版权

技术专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何在 Vue 3 中使用 `reactive` 函数替代 Vue 2 中的 `Vue.observable` 进行状态管理。通过创建一个工具JS文件，导出一个响应式对象、增加和编辑方法，实现兄弟组件间的状态共享。这种方式简化了状态管理，使得数据变化能够实时反映在组件中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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返回一个可响应对象,你可以拿来跨组件共享一个东西