关于 Vue.observable 数据共享

最新推荐文章于 2025-06-07 18:14:10 发布
最新推荐文章于 2025-06-07 18:14:10 发布
阅读量267 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_48960335/article/details/124720312
本文介绍了在不使用Vuex的情况下，如何利用Vue.observable进行数据共享。Vue.observable将普通对象转化为响应式对象，简化组件间数据传递。通过示例展示了在创建store文件夹并初始化index.js后，如何在页面中使用Vue.observable实现商品价格的同步更新，从而达到组件间数据共享的效果。

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

我们项目会将公共的组件拆分开来以便复用，可能一个页面就包含了几个组件，随着组件的细化，经常会遇到多个组件公用一个相同的数据，也就是需要数据共享的情况；
平常我们会用父子组件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,
最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue.observable 全解析：Observable 是什么及使用场景剖析
向着太阳迎着光
11-25 1516
在编程中，Observable（可观察对象）通常指的是一种设计模式，可以让对象保持对其它对象状态的监听。具体来说，Observable是一种可以被“观察”的对象，其他对象可以通过订阅它来监听状态的变化。比如，当某个属性改变时，所有订阅者会自动接收到通知。在 Vue 的响应式系统中，Vue 内部使用了类似于 Observable 的机制来实现数据的绑定和视图更新。当数据发生变化时，Vue 会自动更新视图。
Vue实战指南：Vue.observable的主要作用、应用场景及代码示例
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-13 1412
Vue.observable 是 Vue 核心提供的一个方法，它接受一个普通的 JavaScript 对象，并返回一个具有相同属性的响应式版本的对象。这意味着，当你修改返回的对象的属性时，任何订阅这些属性变化的地方都会得到通知并作出相应的变化。在这个例子中，我们创建了一个 Vuex-like 的 store，并使用 Vue.observable 将 state 属性变为响应式的。：在开发 Vue 插件时，如果需要提供一些响应式的 API 给用户使用，Vue.observable 也是一个不错的选择。
面试官：说说对observable的理解
iygxv
01-19 981
故心故心故心故心小故冲啊 文章目录一、Observable 是什么二、使用场景三、原理分析参考文献 一、Observable 是什么 Observable 翻译过来我们可以理解成可观察的 我们先来看一下其在Vue中的定义 Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器 Vue.observable({ count : 1})
Vue.observable()实现状态管理和数据共享
地中还没海的博客
04-01 343
一、优势 体量比vuex小，使用维护成本相对较低 用于数据共享，当十几个组件同时共用一套数据时候，把数据独立抽离出来，方便维护也可以实现多个组件之间数据的共享和更新 二、使用 1、创建store.js文件 import Vue from "vue"; // 创建observable,并声明变量 export const store = Vue.observable({ name: "a", count: 0 }); // 创建函数，用于修改变量 export const mut.
深入理解 Vue.observable：轻量级响应式状态管理利器
最新发布
每天都要努力学习哦~~
06-07 1348
是一个全局 API，它接收一个普通的 JavaScript 对象作为参数，并返回该对象的响应式代理版本。使传入的对象变得“可观察”（observable）。Vue 内部会追踪对该对象属性的访问（get操作）和修改（set操作）。它是 Vue 实现数据绑定的基石。Vue 组件实例中的data选项返回的对象，在内部就是通过类似observable的机制（实际上是Observer类）处理的。它本身不是一个完整的状态管理库（如 Vuex），而是提供了创建响应式状态片段的能力。
vue.observable()
龚珂心的博客
01-18 837
1、observable 是什么 observable翻译过来可以理解成 可观察的 vue 中的定义 Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器 Vue.observable({ count : 1}) 2、使用场景 在非父子组件通信是， 通常可以使用vuex 或者bus 但是使用的功能不太复杂 使用这两个又有点繁琐，这是o
vue.observable
weixin_43899935的博客
08-13 184
2.6.0 新增 跨组件数据状态共享，一个简易的vuex 一、首先创建一个observable.js文件 二、 import Vue from 'vue' export const store = Vue.observable({ count: 0, token:sessionStorage.name, }); export const mutations = { setCount(count) { store.count = count; }, se
Vue.observable
我的博客简介
12-07 431
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。因此，为了向前兼容，我们推荐始终操作使用。Vue 内部会用它来处理 data 函数返回的对象。变更，所以如这里展示的，它和被返回的对象是同一个对象。返回的对象，而不是传入源对象。中，被传入的对象会直接被。
【JavaScript源代码】Vue局部组件数据共享Vue.observable()的使用.docx
12-29
总结一下，使用 `Vue.observable()` 可以在 Vue 应用中实现局部组件的数据共享，而无需引入 Vuex 这样的全局状态管理工具。这种方式适合处理简单、轻量级的数据共享场景，减少了代码复杂性，提高了开发效率。然而，...
Vue.observable()实现状态管理和数据共享.md
04-01
vue状态管理
Vue.observable()
张木期的博客
11-05 4445
官方文档 Vue.observable() vue2.6发布的一个新的api，可以处理简单的跨组件共享数据状态的问题 ，可以说是个精简版的vuex 示例 // /store/store.js import Vue from 'vue' export const store = Vue.observable({ count: 0 }) export const mutations = { setCount (count) { store.count = count } } 使用 <t
vue中的observable
Cool_so_cool的博客
07-30 291
https://segmentfault.com/a/1190000019292569?utm_source=tag-newest
Vue.observable 是什么
qq_42816270的博客
04-09 609
Vue.observable 是 Vue.js 提供的一个 API，它可以将一个普通的 JavaScript 对象转换为响应式对象。通过使用 Vue.observable，可以在任何地方创建一个响应式对象，而不仅仅是在 Vue 实例中使用。它在 Vue.js 的响应式系统中扮演了很重要的角色，可以用于管理状态、状态共享等场景。
vue-observable （拟vuex）
太易博客
12-25 541
Vue.observable( object ) 1.创建 /src/store.js import Vue from 'vue' export const store = Vue.observable({ url: {}, user: {} }); export const mutations = { setUrl(data) { store.url...
关于Vue中的observable
moon_zq的博客
03-26 638
是 Vue 提供的一种响应式数据处理机制，用于创建可观察对象（observable object）或可观察数组（observable array）。通过将对象或数组转换为可观察状态，我们可以在数据发生变化时自动触发相应的更新操作，从而实现响应式的界面更新。在 Vue.js 中，
小型状态管理器Vue.observable
莫不静好
08-04 363
文章目录背景页面效果仅使用 state 方式自定义 mutation 复用更改状态的方式 背景 在一些小型项目或状态简单的项目中，为了管理几个状态而引入一个库，显得有些笨重，因而我们使用Vue.observable 可以帮助我们快捷的解决 页面效果 仅使用 state 方式 store.js 使用 自定义 mutation 复用更改状态的方式 store.js 应用 ...
Vue的observable用法
qq_45172866的博客
08-29 1730
下面是vue官网的介绍 在多个子组件项目中使用这个非常好用。子组件数据传递，我们可能先想到先把子组件数据传到父组件，再由父组件传给另一个子组件,这样使很麻烦的。 现在我们建立一个js文件，让两个子组件或多个子组件共享这里的数据，这里提供读取和修改方法。我在真实的项目中用到这些，用到了elementUI组件，两个Dialog弹窗的嵌套。下面我这个demo的结构跟我真实项目一致，只是数据不同。 父组件 <template> <div id="observable-box">
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温情key

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值