一种基于Vue的响应式共享数据存储方法及系统与流程

一种基于vue的响应式共享数据存储方法及系统
技术领域
1.本发明涉及数据存储技术领域，尤其是涉及一种基于vue的响应式共享数据存储方法及系统。


背景技术：

2.在传统的vue中，主要通过vuex和localstorage来存储一些共享数据，但两者都有一定的缺点：vuex会随着vue的生命周期而销毁，即当页面刷新后数据将会被销毁，使得数据不能长期的保存；localstorage中的数据虽然页面刷新不会被销毁，但是不具备vue的响应式特性，即当数据更新后，使用此数据的组件无法自动的获取到最新的数据。
3.针对上述存在的缺陷，亟需设计一种新的共享数据存储方法使得共享数据既可以长期存储并且可以实时监控。


技术实现要素：

4.本发明的目的就是为了克服上述现有技术存在的缺陷而提供了一种基于vue的响应式共享数据存储方法及系统，使得共享数据既可以长期存储并且可以实时监控。
5.本发明的目的可以通过以下技术方案来实现：
6.根据本发明的第一方面，提供了一种基于vue的响应式共享数据存储方法，该方法采用vue全局实例模块，将localstorage实例化，实现共享数据存储，具体包括以下步骤：
7.步骤s1、监听数据赋值模块监听数据并实时对token进行赋值；
8.步骤s2、vue全局实例模块接收到token并将其传给实例的侦听方法中，对localstorage里面的token值进行更新；
9.步骤s3、用户通过监听数据实时获取模块直接获取vue全局实例模块中最新的token值完成对token的监听。
10.优选地，所述步骤s2中的侦听方法为watch方法。
11.优选地，所述步骤s2中对localstorage里面的token值进行更新，具体为：
12.当数据发生变化时调用localstorage.setitem对localstorage里面的token值进行更新。
13.根据本发明的第二方面，一种基于vue的响应式共享数据存储系统，该系统包括：
14.监听数据赋值模块，用于监听数据并实时对token进行赋值；
15.vue全局实例模块，用于接收监听数据赋值模块传来的token，调用侦听方法对localstorage里面的token值进行更新；
16.监听数据实时获取模块，用于直接获取vue全局实例模块中最新的token值。
17.优选地，所述监听数据赋值模块具体为：
18.this.$localstorage.token＝token
19.式中，this.$localstorage.token为对localstorage里面的token值进行更新。
20.优选地，所述监听数据实时获取模块具体为：
21.this.$localstorage.token。
22.优选地，所述vue全局实例模块具体为：
23.创建vue实例；
24.在localstorage中获取到需要监听数据的值；
25.将最新的值写入到localstorage中。
26.根据本发明的第二方面，提供了一种电子设备，包括存储器和处理器，所述存储器上存储有计算机程序，所述处理器执行所述程序时实现任一项所述的方法。
27.根据本发明的第三方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现任一项所述的方法。
28.与现有技术相比，本发明具有以下优点：
29.本发明将localstorage进行vue全局实例化，从而使得数据既可以长期保存而且使用该数据的页面又可以方便的监听此数据，从而能够实时的根据此共享数据对页面视图进行实时渲染，提升了效率。
附图说明
30.图1为本发明的结构示意图；
31.图2为vue的响应式特性示意图。
具体实施方式
32.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都应属于本发明保护的范围。
33.实施例
34.术语解释：
35.localstorage：localstorage属性允许在浏览器中存储key/value对的数据。
36.localstorage：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
37.vuex:vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
38.vue.js：是一个用于创建用户界面的开源javascript框架，也是一个创建单页应用的web应用框架。
39.localstorage是一种网络存储对象，开发者可以将数据以键值对的形式存储在浏览器中，从而使得整个前端工程可以访问这些共享数据，其中应用最广泛的的是cookie的存储。localstorage最大的特点是刷新甚至关闭浏览器都不会对存储的数据都进行删除。localstorage常用的方法是：
40.localstorage.setitem(key,value)-存储键值对
41.localstorage.getitem(key)-根据键获取相应的值
42.localstorage.removeitem(key)-根据键删除相应的数据
43.vue的响应式特性：响应式前端系统就是当页面所依赖的数据发生变化的时候，会自动重新渲染视图。当你把一个普通的javascript对象传入vue实例作为data选项，vue将遍历此对象所有的property，并使用object.defineproperty把这些property全部转为getter/setter。object.defineproperty是es5中一个无法shim的特性，这也就是vue不支持ie8以及更低版本浏览器的原因。
44.这些getter/setter对用户来说是不可见的，但是在内部它们让vue能够追踪依赖，在property被访问和修改时通知变更。每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把“接触”过的数据property记录为依赖。之后当依赖项的setter触发时，会通知watcher，从而使它关联的组件重新渲染。其过程如图2所示。
45.localstorage无法实时监控和更新的原因是localstorage不是一个响应式的方法，本发明为了使得localstorage变成响应式组件可以利用vue响应式的特点，使得localstorage变成一个vue实例，这样就能实现localstorage可以被监控和实时更新。
46.接下来给出本发明的方法实施例，一种基于vue的响应式共享数据存储方法，该方法采用vue全局实例模块，将localstorage实例化，实现共享数据存储，具体包括以下步骤：
47.步骤s1、监听数据赋值模块监听数据并实时对token进行赋值；
48.步骤s2、vue全局实例模块接收到token并将其传给实例的侦听方法中，对localstorage里面的token值进行更新；
49.步骤s3、用户通过监听数据实时获取模块直接获取vue全局实例模块中最新的token值完成对token的监听。
50.接下来给出本发明的系统实施例，一种基于vue的响应式共享数据存储系统，该系统包括：
51.监听数据赋值模块，用于监听数据并实时对token进行赋值；
52.vue全局实例模块，用于接收监听数据赋值模块传来的token，调用侦听方法对localstorage里面的token值进行更新；
53.监听数据实时获取模块，用于直接获取vue全局实例模块中最新的token值。
54.详细过程如下：
55.首先要创建一个vue实例，然后在这个实例中定义需要监听的数据，这个数据来源就是localstorage。调用localstorage.getitem来获取需要监听的数据，然后对这个数据用watch方法进行侦听，当数据发生变化时调用localstorage.setitem方法进行重新赋值。
56.vue全局实例模块代码如下：
57.[0058][0059]
在所有的组件中可以调用this.$localstorage.token来实时获取最新的数据，通过this.$localstorage.token＝token来对数据进行赋值。
[0060]
监听数据赋值模块代码如下：
[0061]
this.$localstorage.token＝token，
[0062]
监听数据实时获取模块代码如下：
[0063]
this.$localstorage.token
[0064]
监听数据赋值模块通过this.$localstorage.token＝token对监听数据进行赋值，vue全局实例模块接收到所传来的数据token，由于设置了对token的侦听，当接收的值与原来值不一样时，调用侦听方法token(value)对localstorage里面的token进行更新。
[0065]
监听数据的实时获取模块通过this.$localstorage.token来直接获取vue全局实例模块中token的值，此时获取到的是localstorage里面最新的token值。
[0066]
本发明通过构建符合国产化数据库语法逻辑和数据存储方式的函数，实现了快速将oracle上的表结构完整迁移至国产化的数据库。
[0067]
本发明采用sql方式实现etl(etl是将业务系统的数据经过抽取、清洗转换之后加载到数据仓库的过程)过程，通过定义大数据类型的变量存储查询内容，对表进行分区操作，嵌套查询定义表的结构，灵活度较高，极大的提高了迁移的准确率与效率。
[0068]
其次，数据库迁移往往涉及到数以百万计的海量数据，因此，在迁移过程中，通过分区操作对超大表进行区分，既可以缓解空间资源紧张，提高数据查询速度，也方便修复故障，增强数据的可用性。
[0069]
本发明电子设备包括中央处理单元(cpu)，其可以根据存储在只读存储器(rom)中的计算机程序指令或者从存储单元加载到随机访问存储器(ram)中的计算机程序指令，来执行各种适当的动作和处理。在ram中，还可以存储设备操作所需的各种程序和数据。cpu、rom以及ram通过总线彼此相连。输入/输出(i/o)接口也连接至总线。
[0070]
设备中的多个部件连接至i/o接口，包括：输入单元，例如键盘、鼠标等；输出单元，例如各种类型的显示器、扬声器等；存储单元，例如磁盘、光盘等；以及通信单元，例如网卡、调制解调器、无线通信收发机等。通信单元允许设备通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
[0071]
处理单元执行上文所描述的各个方法和处理，例如方法s1～s3。例如，在一些实施例中，方法s1～s3可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元。在一些实施例中，计算机程序的部分或者全部可以经由rom和/或通信单元而被载入和/或安装到设备上。当计算机程序加载到ram并由cpu执行时，可以执行上文描述的方法s1～s3的一个或多个步骤。备选地，在其他实施例中，cpu可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行方法s1～s3。
[0072]
本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：场可编程门阵列(fpga)、专用集成电路(asic)、专用标准产品(assp)、芯片上系统的系统(soc)、负载可编程逻辑设备(cpld)等等。
[0073]
用于实施本发明的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
[0074]
在本发明的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦除可编程只读存储器(eprom或快闪存储器)、光纤、便捷式紧凑盘只读存储器(cd-rom)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
[0075]
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。