秒速赛车改单你不知道的Vuejs - 状态管理
秒速赛车技巧-秒速赛车规律_官网-秒速赛车走势图
当前位置:主页 > 秒速赛车技巧 > 正文

秒速赛车改单你不知道的Vuejs - 状态管理

  小撸怡情,大撸伤身,强撸灰飞烟别,恩,大概是本人代码撸多了的缘故,我的女朋友就像 复联3结局一样,灰飞烟灭了(分手了,当然原因不只是这么简单,人总得给自己的失败找个借口,不是吗……)。

  所以从3月份开始,心情一直很差,文章也更新的越来越慢。恰巧今天是520,从一大早起来开始,朋友圈就异常的热闹,有秀恩爱的,有秀悲伤地,还有少数微商依旧坚挺的发着广告。正是这些坚强的微商让我明白了,无论别人如何秀,坚定自己的目标继续做下去就是了,也就在这一天我彻底的从失恋中走了出来……

  好了,言归正传,今天来聊聊 Vue.js 中的状态管理,秒速赛车改单也许一提到状态管理,大家首先想到的就是vuex,但是如果你的应用够简单,其实是不需要使用 vuex 的,反而会让你的项目变得繁琐起来。

  Javascript 语言的对象在赋值的时候,只是将其引用地址赋值给了一个新的变量而已,所以在改变新对象属性是,会同时改变原对象属性。

  所以大家在写代码的时候会尽量的避免此类事情的发生,但是也正是因为这个特性,我们可以实现 Vuejs 中的状态共享。

  首先初始化一个全局对象,维护着全局数据,然后将其注入到所有用到的组件中,那么在组建内改变某个属性值,其他组件也就同步更新了。

  明白了原理就很好实现了。同样的通过vue-cli初始化我们的项目模板,然后新建src/state.js文件:

  ok,这样就完成了,运行项目,你会发现,改变comp1中的输入框的值,comp2也同步发生改变,反过来也是一样的。至于原理,上面已经说过了,这里就不再赘述,赶紧动手实现下吧。

  混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

  所以我们也可以通过mixins的方式,将我的的全局状态state通过mixins的方式引入到各个组件中,当然数据其实还是通过 对象引用 实现的。

  其实,通过mixins方式跟 方法1基本差不多,只不过相对于 方法1的好处就是,在使用组件内,将状态数据属性跟data进行了代码上隔离(实际上还是混入到了data属性中)。

  我们知道 Vuejs 有一对API$on/$emit,是用来自定义事件监听和触发的,而且在触发的时候可以携带数据。这样我们就可以通过创建一个全局的 Vue 实例$bus,然后在各个组件中进行相关事件的触发和监听,数据流的传递和共享,这也就是大家常说的 发布订阅模式。

  熟悉$on/$emit API的同学,应该很容易就可以实现了,先上代码:

  好了,先运行一下,同样达到了我们想要的效果。上面代码中,我们先在src/state.js中创建了一个 Vue 实例,然后在组件中created的时候监听msg-change事件,在input值改变的时候,触发msg-change事件,这样就实现了comp1和comp2的msg数据共享。

  然后试着改变新添加的输入框数据,你会发现,新添加的两个输入框,数据也是同步更新的。

  细心的同学,会发现有个问题,虽然新添加的两个输入框同步了,但是之前的两个事件触发的输入框并未同步更新。因为我们只是单纯地修改了对象属性,并未触发msg-change事件,所以还需要在$bus中添加watcher,在msg变化时,触发msg-change事件;反过来,$bus自身需要监听msg-change事件,在触发的时候,修改自身msg的值就可以了。

  当然我们这里只是为了demo,实际开发过程中,自己一定要清楚,这里其实有两个数据管道,一个是 发布/订阅 可以理解为单工(单向数据流)模式,一个是 对象共享 也就是 方法2,可以理解为双工(双向数据流)模式。首先你需要理解清楚 当前需要共享的数据是单向还是双向,然后根据场景灵活运用。

  至于 Vuex 的使用,本文就不再实现了,官方文档已经写得很清楚,请细心阅读官方文章。

  本文写了这么多其实想告诉大家,对于 Vuejs 状态管理,我们不仅仅只有vuex,框架或工具的选择不是固定的,实际开发中,可以多尝试,找到最适合的架构才是最好的。引用 Vue 的作者的话就是:

  如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此--如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

版权保护: 本文由 主页 原创,转载请保留链接: http://www.ecentiv.com//html/532.html