使用Observable实现Vue全局状态共享

最新推荐文章于 2023-09-11 10:00:03 发布
最新推荐文章于 2023-09-11 10:00:03 发布
阅读量205 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45725046/article/details/106915590
版权
本文介绍了如何使用Vue.observable()方法实现全局状态共享。Vue.observable()允许对象变得响应式，适用于Vue 2.6及以上版本。在低版本中会遇到不兼容问题，解决办法是升级到Vue 2.6以上。文中还给出了创建store和在应用中使用的示例。
摘要由CSDN通过智能技术生成

Vue.observable( object )

参数
{Object} object
用法 -
让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象
此API为2.6版本新增, 那么低版本是不兼容, 会报出以下错误:

vue__.default.observable is not a funcion

解决方法是将Vue升级到^2.6.0 即可.

Demo

1.创建store

// 文件路径 - /store/store.js
import Vue from 'vue'

export const store = Vue.observable(
最低0.47元/天 解锁文章
可乐*不渴
关注
vue 利用observe实现组件之间数据共享
weixin_44294593的博客
03-14 118
原始count为 0 ，点击4次后为4 import Vue from "vue"; const oCustomObserve = Vue.observable({ count: 0 }); export { oCustomObserve }; 在这里插入图片描述
Vue.observable()实现状态管理和数据共享
地中还没海的博客
04-01 294
一、优势 体量比vuex小，使用维护成本相对较低 用于数据共享，当十几个组件同时共用一套数据时候，把数据独立抽离出来，方便维护也可以实现多个组件之间数据的共享和更新 二、使用 1、创建store.js文件 import Vue from "vue"; // 创建observable,并声明变量 export const store = Vue.observable({ name: "a", count: 0 }); // 创建函数，用于修改变量 export const mut.
vue状态共享 Observable API
不正经的博客
06-16 245
随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。 如下这个例子，我们将在组件外创建一个 store，然后在 App.vue组件里面使用 store.js 提供的 store和 mutation方法，同理其它组件也可以这样使用，从而实现多个组件.
Vuex-全局状态集中式管理神器，做vue项目不知道Vuex真的out了
秃了也弱了
06-21 1938
一、概念 1.什么是vuex？ 官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex也集成到Vue的官方调试工具devtoolsextension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。 2.状态管理到底是什么? 状态管理模式、集中式存储管理这些名词听起来就非常高大上,让人捉摸不透。 ...
【Vue.js】通过独立响应式对象进行组件间数据共享
weixin_39006917的博客
03-14 368
对于组件间的数据共享，也可以使用Vue.observable(object)。通过Vue.observable(object)，可以让一个对象变成可响应的。 // 定义独立的响应式对象 var state = Vue.observable({ msg:'welcome', info:'你好' }); 上述响应式对象可以在任意组件的计算属性内使用，并且会在数据发生改变时触发相应的组件更新。实际上，此时就是将该响应式对象作为组件间数据状态存储的一个容器。 new Vue({ el: '
使用Vue.observable()进行状态管理的实例代码详解
12-12
Vue.observable()是Vue.js 2.6版本引入的一个新特性，它是Vue响应式系统的一部分，主要用来处理数据状态管理，特别是在小型应用中，无需引入Vuex这样的全局状态管理库时。这个API允许开发者将普通JavaScript对象转换...
【JavaScript源代码】Vue局部组件数据共享Vue.observable()的使用.docx
12-29
总结一下，使用 `Vue.observable()` 可以在 Vue 应用中实现局部组件的数据共享，而无需引入 Vuex 这样的全局状态管理工具。这种方式适合处理简单、轻量级的数据共享场景，减少了代码复杂性，提高了开发效率。然而，...
vue-简单的状态管理实现
u012864281的博客
07-01 1960
在vue项目中，有很多数据会在组件之间共享，这时就需要一个状态管理工具。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，vuex适用于中大型项目，对于小项目来说是繁琐冗余的。本文就来讲述如何利用vue的observable来构建一个状态管理器。 1、创建 store store.js import Vue from 'vue' const states = Vue.observable({ message: 'hello vue', count: 0 }) const m
Vue.js与全局状态管理的选择：Vuex还是MobX？
全局状态管理可以帮助我们在Vue.js应用中轻松地管理共享状态，实现组件间的通信和数据共享，同时也便于对状态进行统一的管理和维护。 ## 简要介绍Vuex和MobX 在Vue.js中，我们有多种选择来实现全局状态管理。其中，...
vue面试四之vue定义全局变量和全局方法、Vue.observable API用过没？、vue强制刷新组件、 Vue中target和currentTarget的使用
Dormiveglia-flx的博客
08-17 493
vue面试四一 vue定义全局变量和全局方法二 Vue.observable API用过没？三 vue强制刷新组件四 Vue中target和currentTarget的使用 一 vue定义全局变量和全局方法 1.1 定义common.vue 里面存储全局变量与方法，供各个vue文件使用 <script type="text/javascript"> // 定义一些公共的属性和方法 const httpUrl = 'http://39.105.17.99:8080/'
Vue observable
weixin_40461134的博客
09-14 149
observable 官方 用法// <el-button type="primary" @click="onSave">{{state.count}}</el-button> this.state = Vue.observable({ count: 0 }); state: null onSave() { this.state.count++; ------- 这样创造对象，好像可以避免$set的使用或者在vuex进行对象式响应 ...
vue observable is not a function
xjj1314的专栏
03-26 1005
vue.observable 就 vue 2.6.0 版本才有的API，如果运行报observable is not a function错误，就说明VUE版本可能是2.6以下的，需要升级了。 升级的方法： npm update vue@2.6.12 只升级vue，可能还不够，还要升级vue-loader和vue-template-compiler vue-loader建议先删除再安装 npm unistall vue-loader -D npm install vue-loader@1
vue设置全局变量：让你的数据无处不在！
最新发布
Shids_的博客
09-11 1万+
vue设置全局变量：让你的数据无处不在！
使用Vue.observable()进行状态管理
sunhonghui9527的博客
07-15 598
随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。 observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性的类型不变量而是一个函数，通过返回一个函数给vie
Vue创建响应式全局数据--Vue.observable() 实现类似vuex的状态管理功能
Ang_pmj的博客
12-11 1440
记录一下：使用Vue.observable 实现类似vuex的状态管理功能，我也是今天自己测试出来的一、Vue.observable()简介二、如何运用(介绍一下我是如何简单的应用) 一、Vue.observable()简介 Vue.observable(object) 是vue2.6版本新增的功能 它可以让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。 返回的对象可以...
如何优雅地解决多个 React、Vue App 之间的状态共享？
公众号：前端铁蛋
12-01 389
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ls5CUZQT-1606655042509)(https://user-images.githubusercontent.com/44939961/100539989-601ce180-3275-11eb-8a51-592d9fcc1715.png)] 前言 人生是个积累的过程，你总会有摔倒，即使跌倒了，你也要懂得抓一把沙子在手里。 —— 丁磊 码过的每一个需求、踩过的每一个坑、修过的每一个 bug 、学过的每一个知识以及看
使用 es6 class类创建对象 在其他页面 用vue引用报错 is not a constructor
热门推荐
weixin_39090097的博客
09-14 2万+
最近项目中使用 es6 新语法class创建对象，在 vue 文件中导入以后，在new的时候报错，很是郁闷 然后 启动项目 ，打开浏览器 刷刷报错   明明是是引入了为嘛报错呢？ 最后发现是因为 命名的问题    所以小伙伴 们，引入的时候别刷刷名字 全部一通复制，let的定义名字 千万不能和 import 定义的名字一样...
手把手教你实现Vue状态管理
"本文将深入探讨如何使用几十行代码来实现Vue的状态管理机制，旨在帮助开发者理解如何在Vue应用中集中管理组件之间的共享状态，并提供一个简单的实现示例。" 在Vue框架中，状态管理是非常重要的一环，它使得组件间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值