Vue创建响应式全局数据--Vue.observable() 实现类似vuex的状态管理功能

最新推荐文章于 2024-08-16 15:01:15 发布
最新推荐文章于 2024-08-16 15:01:15 发布
阅读量1.4k 收藏 2
点赞数 2
分类专栏： Vuejs 前端 文章标签： Vue Vue.observable
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ang_pmj/article/details/103499792
版权
本文介绍了Vue 2.6新增的Vue.observable()功能，该功能使对象变得响应式，可用于创建轻量级的状态管理系统。通过创建项目、设置store文件结构、定义state和mutations，博主展示了如何在不使用Vuex的情况下，实现类似的状态管理，使得数据在页面中能够响应式更新。
摘要由CSDN通过智能技术生成

记录一下：使用Vue.observable 实现类似vuex的状态管理功能，我也是今天自己测试出来的

一、Vue.observable()简介

Vue.observable(object) 是vue2.6版本新增的功能
它可以让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景

二、如何运用(介绍一下我是如何简单的应用)

1.我们首先利用脚手架初始化一个项目

2.用过vuex的都知道，在我们添加了vuex依赖后，我们为首先会在src目录下新建一个store文件夹，用来管理我们的状态，没有用过的同学可以先去学习一下。

3.仿照那种格式，博主也在在src目录下新建store文件夹，并新建子文件 index.js，state.js，mutations.js。

这里，我分别介绍一下这些文件的作用，并附上代码：
state.js：就是一个状态，存储全局数据
在这里插入图片描述

mutations.js：用来更新state；将state.js的数据导入，用于操作

最低0.47元/天 解锁文章
酒馆打烊了
关注
专栏目录
手写一个简易的vuex
tiandao451的博客
02-03 343
目录一、介绍二、前置知识1、Vuex的核心概念2、Vuex的基本使用3、组件内的状态管理4、什么情况下使用 Vuex三、Vuex实现install 方法Store 类四、运行测试效果 一、介绍 Vuex 是一个专为 Vue.js 应用程序开发的全局状态管理器。它的作用就是进行状态管理，解决复杂组件通信，数据共享。 参考链接： Vuex 中文文档 Vuex github地址 下面将实现一个简单的Vuex 的功能，如不想看前置知识可以直接跳到最后的代码实现部分。 二、前置知识 1、Vuex的核心概念
利用Vue.observable实现简易的Vuex
ccattempt的博客
08-28 388
目录1、搭架子2、注入Vue构造函数3、初始化并声明commit和dispatch4、利用Vue.observable实现响应式5、利用Object.defineProperty实现getters6、测试7、完整代码 1、搭架子 首先把大致的架子搭好。 let Vue; let _self; class Store { constructor(state, getters, mutations, actions) {} commit(cb, ...args) {} dispatch(cb, ..
vue3-03-创建响应式数据的几种方法
最新发布
m0_64150479的博客
08-16 701
本文章总结了vue3中创建 “响应式数据” 的几种方法，包含创建 “基本数据类型” 的数据 和 “对象类型” 的数据
Vue.observable实现一个简易的Vuex状态管理
qq_21976063的博客
06-30 212
创建store /src/store/index.js import Vue from 'vue'; // 利用Vue.observable 实现一个可响应的对象 export const store = Vue.observable({ username: 'aa', age: '' }) // 定义提个mutations， 实现可修改属性 export const mutations = { setUsername(name) { store.username = name
使用vue模拟VueX
weixin_44169058的博客
02-27 290
学习笔记 //1.挂载$store //2.实现store let Vue; class Store{ constructor(options) { //将state进行响应式处理 //访问 使用 this.$store.state.xxxx this._vm = new Vue({ data:{ $$state:options.state, }, }); this._mutations = options.mutations; this._actio
在 Vue 中手写一个微型 Vuex
张二伯的博客
07-06 304
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，在vue项目中，有些数据需要在很多组件内进行传递，为了方便管理和维护，我们就需要这样一个工具来管理这些数据，通常情况下我们就会选择Vuex。 但是正如Vuex官网所说： Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。 但是当我需要这样一个工具又不想变得冗余繁琐怎么办呢，这时我
vue-stator:基于Vue.observable（）的Vuex替代
04-28
vue-stator Vue.observable()在Vue.observable()使用Vue.observable() ，这意味着分配和数组更改将自动触发更新。 因此， vue-stator只能让您定义action ，而不是动作和突变。 为了使从Vuex的过渡变得容易，它为操作...
使用Vue.observable()进行状态管理的实例代码详解
12-12
Vue.observable()是Vue.js 2.6版本引入的一个新特性，它是Vue响应式系统的一部分，主要用来处理数据状态管理，特别是在小型应用中，无需引入Vuex这样的全局状态管理库时。这个API允许开发者将普通JavaScript对象转换...
vue-geb-使用Observables的全局事件总线。-Vue.js开发
05-27
Vue-geb-全局事件总线Vue-geb是vue全局事件总线插件，可利用可观察对象的功能帮助在整个应用程序中广播事件。 仅添加5个Vue-geb-全局事件总线Vue-geb是一个vue全局事件总线插件，可利用可观察对象的功能帮助在应用...
使用Observable实现Vue全局状态共享
qq_45725046的博客
06-23 205
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 c
Vue.observable的理解
zz130428的博客
05-22 475
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。源码位置：src\core\observer\index.js。，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。变更，它和被返回的对象是同一个对象。在非父子组件通信时，可以使用通常的。中，被传入的对象会直接被。翻译过来我们可以理解成。
vue中实现全局方法
simple_T的博客
06-03 830
https://www.cnblogs.com/axl-study/p/9812492.html https://cn.vuejs.org/v2/guide/plugins.html
vue-observable （拟vuex）
太易博客
12-25 499
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 468
是 Vue 提供的一种响应式数据处理机制，用于创建可观察对象（observable object）或可观察数组（observable array）。通过将对象或数组转换为可观察状态，我们可以在数据发生变化时自动触发相应的更新操作，从而实现响应式的界面更新。在 Vue.js 中，
Vue的observable用法
qq_45172866的博客
08-29 1673
下面是vue官网的介绍 在多个子组件项目中使用这个非常好用。子组件数据传递，我们可能先想到先把子组件数据传到父组件，再由父组件传给另一个子组件,这样使很麻烦的。 现在我们建立一个js文件，让两个子组件或多个子组件共享这里的数据，这里提供读取和修改方法。我在真实的项目中用到这些，用到了elementUI组件，两个Dialog弹窗的嵌套。下面我这个demo的结构跟我真实项目一致，只是数据不同。 父组件 <template> <div id="observable-box">
Vue2.6新特性之Vue.observable
科技向善
02-15 1003
API observable是Vue2.6中非常重要的新特性，就是可以非常方便地使用响应式属性， <div id='root'> {{message}} <button @click="change">Change</button> </div> <script> const state = Vue.observable({ mes...
Vue全局响应的按键事件
weixin_45501830的博客
01-11 891
问题：Vue怎么做到全局响应按键事件，因为自定义按键事件一般要写在input标签上，且要聚焦在input上才能响应。 思路： 直接在Vue的mounted中监听键盘按键 具体代码 <div id="app"> </div> <script type="text/javascript"> Vue.config.keyCodes.f2 = 113 var vm = new Vue({ el: '#app', data: {
面试官：说说对observable的理解
iygxv
01-19 908
故心故心故心故心小故冲啊 文章目录一、Observable 是什么二、使用场景三、原理分析参考文献 一、Observable 是什么 Observable 翻译过来我们可以理解成可观察的 我们先来看一下其在Vue中的定义 Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器 Vue.observable({ count : 1})
手把手教你实现Vue状态管理
"本文将深入探讨如何使用几十行代码来实现Vue的状态管理机制，旨在帮助开发者理解如何在Vue应用中集中管理组件之间的共享状态，并提供一个简单的实现示例。" 在Vue框架中，状态管理是非常重要的一环，它使得组件间...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值