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

最新推荐文章于 2024-04-25 08:00:00 发布
最新推荐文章于 2024-04-25 08:00:00 发布
阅读量1.3k 收藏 2
点赞数 2
分类专栏： Vuejs 前端 文章标签： Vue Vue.observable
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ang_pmj/article/details/103499792
版权

记录一下：使用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：就是一个状态，存储全局数据

最低0.47元/天 解锁文章
酒馆打烊了
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
手写一个简易的vuex
tiandao451的博客
02-03 333
目录一、介绍二、前置知识1、Vuex的核心概念2、Vuex的基本使用3、组件内的状态管理4、什么情况下使用 Vuex三、Vuex实现install 方法Store 类四、运行测试效果 一、介绍 Vuex 是一个专为 Vue.js 应用程序开发的全局状态管理器。它的作用就是进行状态管理，解决复杂组件通信，数据共享。 参考链接： Vuex 中文文档 Vuex github地址 下面将实现一个简单的Vuex 的功能，如不想看前置知识可以直接跳到最后的代码实现部分。 二、前置知识 1、Vuex的核心概念
vue-stator:基于Vue.observable（）的Vuex替代
04-28
vue-stator Vue.observable()在Vue.observable()使用Vue.observable() ，这意味着分配和数组更改将自动触发更新。 因此， vue-stator只能让您定义action ，而不是动作和突变。 为了使从Vuex的过渡变得容易，它为操作...
Vue.observable的理解
zz130428的博客
05-22 455
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。源码位置：src\core\observer\index.js。，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。变更，它和被返回的对象是同一个对象。在非父子组件通信时，可以使用通常的。中，被传入的对象会直接被。翻译过来我们可以理解成。
Vue.observable理解、使用和原理
最新发布
贫僧法号依平
04-25 360
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。源码位置：src\core\observer\index.js。，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。变更，它和被返回的对象是同一个对象。在非父子组件通信时，可以使用通常的。，让一个对象变成响应式数据。中，被传入的对象会直接被。翻译过来我们可以理解成。
利用Vue.observable实现简易的Vuex
ccattempt的博客
08-28 370
目录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, ..
Vue.observable实现一个简易的Vuex状态管理
qq_21976063的博客
06-30 201
创建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 230
学习笔记 //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 295
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，在vue项目中，有些数据需要在很多组件内进行传递，为了方便管理和维护，我们就需要这样一个工具来管理这些数据，通常情况下我们就会选择Vuex。 但是正如Vuex官网所说： Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。 但是当我需要这样一个工具又不想变得冗余繁琐怎么办呢，这时我
vue-geb-使用Observables的全局事件总线。-Vue.js开发
05-27
Vue-geb-全局事件总线Vue-geb是vue全局事件总线插件，可利用可观察对象的功能帮助在整个应用程序中广播事件。 仅添加5个Vue-geb-全局事件总线Vue-geb是一个vue全局事件总线插件，可利用可观察对象的功能帮助在应用...
基于Vue3+Ts的漫画后台管理系统源码，用于采集漫画数据和管理数据.zip
12-01
9. **状态管理**：Vuex 是Vue生态中的状态管理库，它可以帮助管理全局状态。在Vue3中，Vuex也进行了升级，更好地与Composition API集成。通过Vuex，可以集中管理漫画数据的加载、更新和缓存。 10. **部署与优化**：...
vue-cnode：基于vue3函数的构建cnode社区
02-06
例如，`vue-cnode`可能使用`ref`和`reactive`来创建响应式数据，使用`watch`来监听数据变化，使用`computed`来实现复杂的计算逻辑。 Vuex是Vue的状态管理库，vue-cnode项目很可能采用Vuex 4（与Vue3兼容的版本）来...
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
09-01
Vue通过`Vue.observable`或组件内部的`data`对象创建一个可响应的数据结构。每次数据变化时，Vue会跟踪依赖关系，并自动通知所有依赖于该数据的视图进行更新。这种机制避免了Angular 1.x中使用的脏检查（digest ...
vue中实现全局方法
simple_T的博客
06-03 802
https://www.cnblogs.com/axl-study/p/9812492.html https://cn.vuejs.org/v2/guide/plugins.html
vue-observable （拟vuex）
太易博客
12-25 482
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用法
qq_45172866的博客
08-29 1620
下面是vue官网的介绍 在多个子组件项目中使用这个非常好用。子组件数据传递，我们可能先想到先把子组件数据传到父组件，再由父组件传给另一个子组件,这样使很麻烦的。 现在我们建立一个js文件，让两个子组件或多个子组件共享这里的数据，这里提供读取和修改方法。我在真实的项目中用到这些，用到了elementUI组件，两个Dialog弹窗的嵌套。下面我这个demo的结构跟我真实项目一致，只是数据不同。 父组件 <template> <div id="observable-box">
Vue2.6新特性之Vue.observable
科技向善
02-15 990
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 858
问题：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: {
Vue.observable的使用(小型状态管理器)
程邓楠的博客
12-08 4983
observable()方法，用于设置监控属性，这样就可以监控view视图Module中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性的类型不变量而是一个函数，通过返回一个函数给viewModule对象中的属性，从而来监控该属性。
使用Observable实现Vue全局状态共享
付出总会有收获!
06-12 3915
项目不大, 又不想用Vuex, 那么使用Observable来实现状态共享也不失为一个选择. - 先来看看官方资料, Vue.observable( object ) 2.6.0 新增 参数 {Object} object 用法 - 让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象 此API为2.6版本新增, 那么低版本是不兼容, 会报出以下错误: vue__.de...
vue2全局变量可以响应式吗
03-28
Vue2 全局变量可以通过 `Vue.observable()` 方法将其转换为响应式对象。例如： ```javascript const globalData = { count: 0 }; Vue.observable(globalData); new Vue({ data: { globalData }, mounted() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值