├── README.md
├── index.ts
├── package.json
└── vite.config.ts


/README.md:
--------------------------------------------------------------------------------
  1 | 关注 (微信公众号 、抖音、B站)搜索 阿勇学前端
  2 | 
  3 | # 轻量 小 简约 而不简单  好学不难
  4 | 
  5 | # vue-data-share
  6 | 
  7 | ## 组件公共数据状态共享
  8 | 
  9 | This is a lightweight global data common state management component compatible with vue2 and vue3:
 10 | 
 11 | **这是一个兼容 vue2 和 vue3 的轻量级全局数据公共状态管理组件**
 12 | 
 13 | 组件库作者: Ayong
 14 | 
 15 | 作者微信 非诚勿扰 :X154001888
 16 | 
 17 | 组件库源码GitHub地址:https://github.com/AyongNice/data-share
 18 | 
 19 | ### 一 :框架兼容:
 20 | 
 21 | #### **他可以运行在vue@2.6.14 至  vue@3.2.47 (也就是我们常说的vue2和vue3)版本**
 22 | 
 23 | ### 二 : 他可以帮你做什么?
 24 | 
 25 | **他可以帮你在vue框架中实现 跨组件进行数据共享!**
 26 | 
 27 | 说到vue跨组件数据共享大家会想到 vueX. pain 等组件 该组件与她不同点在于 他是一个非常轻量级别 **只有4KB大小** 并且 他是一个非常容易掌握学习的组件,使用起来非常简单, 我们经常称之为 **无脑傻瓜式用法**!  但是我们不是傻瓜 我们都是**优秀有趣的前端工程师**
 28 | 
 29 | ### 三: 他应该如果下载使用?
 30 | 
 31 | ```
 32 | npm i  vue-data-share
 33 | ```
 34 | 
 35 | ## 介绍下该库方法信息
 36 | 
 37 | | 方法名         | 介绍               | 入参字段类型             |  入参介绍                             |
 38 | | -------------- | ------------------ |------------------|------------------------------------------|
 39 | | VueDataShare   | 组件构造函数       | Object<Parma>    | Parma全局数据共享组件的配置信息见下方详情介绍                |
 40 | | setInitialData | 原始公共数据       | Object<any,any>  | 原始数据 通常在mian.js文件设置可以设置全局的 基础数据 对象以及 函数  |
 41 | | get            | 获取全局基本数据值 | string           | 传入原始数据字段的key 即可响应式的获取数据                  |
 42 | | set            | 设置全局基本数据值 | string           | 传入原始数据字段的key 即可响应式的设置数据                  |
 43 | | callFunction   | 调用公共方法       | string ,args     | 第一个参数为传入原始数据函数名的key  方法入参数,第二个参数为 该方法的入参 |
 44 | | register       | 消息订阅事件       | string, Funticon | 定于一个函数名,以及函数体.使用示例见下方                    |
 45 | | publish        | 消息事件发布       | string ,args     | 发布制定的消息事件名称,传入函数参数使用示例见下方                |
 46 | | deleteSnapshot        | 删除缓存记录       | -                | 删除缓存数据                                   |
 47 | 
 48 | ## Parma 字段介绍
 49 | 
 50 | | 字段名   |  类型  | 介绍                                        |
 51 | | -------- |  -------- | ------------------------------------------------------------ |
 52 | | snapshot | boolean  | 是否缓存全局公共数据数据; 数据将缓存浏览器indexDB 清除缓存调用deleteSnapshot方法,true缓存 ; 默认false不缓存 |
 53 | 
 54 | ## vue2版本使用示例
 55 | 
 56 | ### Main.js 文件 setInitialData 设置原始数据
 57 | 
 58 | ```javascript
 59 | import Vue from 'vue'
 60 | import App from './App.vue'
 61 | import router from "@/router";
 62 | Vue.config.productionTip = false
 63 | import VueDataShare from 'vue-data-share'
 64 | const vueDataShare = new VueDataShare({snapshot: true})
 65 | vueDataShare.setInitialData({
 66 |     num: 1, 
 67 |     list: [{
 68 |         name: '河南省', num: 18, child: [{
 69 |             name: '日本县', num: 1
 70 |         }]
 71 |      }], 
 72 |    logout: () => {
 73 |         console.log('退出登录')
 74 |     }
 75 | })
 76 | Vue.prototype.$vueDataShare = vueDataShare
 77 | new Vue({
 78 |     router,
 79 |     render: h => h(App),
 80 | }).$mount('#app')
 81 | ```
 82 | 
 83 | ### 在组件、页面组件中使用 get获取数据  、 set设置数据
 84 | 
 85 | App.vue 在app页面获取 num
 86 | 
 87 | ```javascript
 88 | <template>
 89 |   <div id="app">
 90 |     {{ $vueDataShare.get('num') }}
 91 |     <router-view/>
 92 |   </div>
 93 | </template>
 94 | <script>
 95 | export default {
 96 |   name: 'App',
 97 | }
 98 | ```
 99 | 
100 | 在其中一个组件使用set方法设置数据时候、真个项目所有组件用到改值都会统一同步
101 | 
102 | ```javascript
103 | <template>
104 |   <div>
105 |     <h1>
106 |       公共数据num数值: {{ $vueDataShare.get('num') }}
107 |     </h1>
108 |     <div class="three">
109 |       <dd v-for="(item,index) in $vueDataShare.get('list')" :key="index">
110 |         {{ item.name }}
111 |         {{ item.num }}
112 |         <p v-for="(child,indexK) in item.child" :key="indexK">
113 |           {{ child.name }} 
114 |           <span>{{ child.num }}</span>
115 |         </p>
116 |       </dd>
117 |     </div>
118 |     <button @click="setNum">全局数据设置++</button>
119 |     <button @click="logout">logout</button>
120 |     <button @click="getList">getList</button>
121 |     <button @click="chanListNum">chanListNum</button>
122 |   </div>
123 | </template>
124 | <script>
125 | import Vue, {defineComponent} from 'vue'
126 | export default defineComponent({
127 |   name: "page1",
128 |   methods: {
129 |     //设置全局 num 值
130 |     setNum() {
131 |       let num = this.$vueDataShare.get('num');
132 |       num++
133 |       this.$vueDataShare.set({num})
134 |     },
135 |     //调用公共方法退出登陆
136 |     logout() {
137 |       this.$vueDataShare.callFunction('logout')
138 |     },
139 |     //获取全局list数据
140 |     getList() {
141 |       const list = this.$vueDataShare.get('list')
142 |       console.log('list', list)
143 |     },
144 |     //设置全局list数据值
145 |     chanListNum() {
146 |       const list = this.$vueDataShare.get('list')
147 |       list[0].num = 100
148 |     }
149 |   }
150 | })
151 | </script>
152 | ```
153 | 
154 | ### 调用公共方法 callFunction
155 | 
156 | 调用原始数据中封装的公共方法 我们只需要调用 组件的callFunction 方法 传入对应函数字段名即可
157 | 
158 | ```javascript
159 | <script>
160 | import Vue, {defineComponent} from 'vue'
161 | export default defineComponent({
162 |   name: "page1",
163 |   methods: {
164 |     //调用公共方法退出登陆
165 |     logout() {
166 |       this.$vueDataShare.callFunction('logout')
167 |     },
168 |   }
169 | })
170 | </script>
171 | ```
172 | 
173 | 
174 | 
175 | ### 跨组件通信 register 与 publish
176 | 
177 | vue-data-share 组件帮你提供了跨页面夸组件之间的通信方案功能就是 **消息订阅与发布**,那如何使用他呢
178 | 
179 | 在通知页面组件中 注册一个自定义事件 定一个名字 requestList
180 | 
181 | ```javascript
182 | <script>
183 | import Vue, {defineComponent} from 'vue'
184 | export default defineComponent({
185 |   name: "page1",
186 |   mounted() {
187 |     this.$vueDataShare.register('requestList', (parmas) => {
188 |       console.log(parmas)
189 |     })
190 |   },
191 | })
192 | </script>
193 | ```
194 | 
195 | 在通知页面中,我们只需要 调用publish方法发送消息, 被通知页面将会收到消息及参数,来完成我们的业务逻辑需求
196 | 
197 | ```javascript
198 | <script>
199 | export default {
200 |   name: 'App',
201 |   methods: {
202 |     message() {
203 |       this.$vueDataShare.publish("requestList", "Hello, World!");
204 |     }
205 |   }
206 | }
207 | </script>
208 | ```
209 | 
210 | ## Vue3版本使用示例
211 | 
212 | **我们使用ts为大家示例**
213 | 
214 | main.js文件 如同vue2一样 在main.js引入组件库 设置原始默认数据,并且可以设置是否缓存数据
215 | 
216 | ```
217 | import {createApp} from 'vue'
218 | import App from './App.vue'
219 | import VueDataShare from 'vue-data-share'
220 | const vueDataShare:VueDataShare = new VueDataShare({snapshot: true});
221 | vueDataShare.setInitialData({
222 |     num: 1,
223 |     loginOut: () => {
224 |         console.log('loginOut')
225 |     },
226 | })
227 | createApp(App).mount('#app')
228 | ```
229 | 
230 | App.vue文件
231 | 
232 | ```typescript
233 | <template>
234 |   <HelloWorld></HelloWorld>
235 |   <h1>{{ vueDataShare.get('num') }}</h1>
236 |   <button @click="num">++</button>
237 |   <button @click="loginOut">退出登陆</button>
238 | </template>
239 | 
240 | <script lang="ts" setup>
241 | import VueDataShare from 'vue-data-share';
242 | import HelloWorld from './components/HelloWorld.vue';
243 | 
244 | const vueDataShare: VueDataShare = new VueDataShare({snapshot: false});
245 | //设置全局num字段数据
246 | const num = (): void => {
247 |   vueDataShare.set({num:vueDataShare.get('num')++})
248 | }
249 | //设置全局公共方法
250 | const loginOut = (): void => {
251 |   vueDataShare.callFunction('loginOut')
252 | }
253 | //注册跨页面通信事件
254 | vueDataShare.register('request', (callback) => {
255 |   callback({name: 'ayong'})
256 | })
257 | console.log('全局原始数据num获取-----', vueDataShare.get('num'))
258 | 
259 | </script>
260 | 
261 | ```
262 | 
263 | HelloWorld组件
264 | 
265 | ```typescript
266 | <template>
267 |   <button @click="vueDataSharePage">通信</button>
268 |   <h1>{{ vueDataShare.get('num') }}</h1>
269 | </template>
270 | 
271 | <script setup lang="ts">
272 | import VueDataShare from 'vue-data-share';
273 | 
274 | const vueDataShare: VueDataShare = new VueDataShare();
275 | 
276 | defineProps<{ msg: string }>()
277 | 
278 | const vueDataSharePage = () => {
279 |   //发送消息通知
280 |   vueDataShare.publish('request', (res) => {
281 |     console.log('通信回调参数', res)
282 |   })
283 | }
284 | </script>
285 | ```
286 | 
287 | 以上vue3 使用示例我们一次性列举了 **设置原始数据、获取全局数据、设置全局数据、夸组件通信消息订阅与发布**的示例
288 | 
289 | **与vue2 唯一不同的是VueDataShare没有挂载到全局this ,因为在vue3中没有this,所有每个组件需要引入自定义函数**
290 | 
291 | **其他所有的功能以及使用方式 vue2版本与vue3都一样的,这里我们不在重复描述每一个方法功能**
292 | 
293 | ## 轻量 小 简约 而不简单 好学不难 
294 | 
295 | 


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
  1 | import RelationalIndexDB from "relational-indexdb";
  2 | import {Vue, isVue2, reactive} from 'vue-demi';
  3 | 
  4 | 
  5 | class MessageService {
  6 |     params = {
  7 |         snapshot: false
  8 |     };
  9 |     dataStore = {}
 10 |     indexDB = {}
 11 |     subscribers = {};
 12 |     static instance = null;
 13 | 
 14 | 
 15 |     constructor(params) {
 16 |         if (!MessageService.instance) {
 17 |             const tableData = [
 18 |                 {name: 'id', keyPath: 'id', unique: true},
 19 |                 {name: 'data', keyPath: 'data', unique: false}
 20 |             ];
 21 |             const createTableConfig = [
 22 |                 {
 23 |                     tableName: 'tableData',
 24 |                     keyPath: 'id',
 25 |                     autoIncrement: true,
 26 |                     keyConfig: tableData
 27 |                 }
 28 |             ];
 29 |             this.indexDB = RelationalIndexDB.getInstance('ayong', 1, createTableConfig);
 30 |             MessageService.instance = this;
 31 |         }
 32 | 
 33 |         /**
 34 |          * 参数配置
 35 |          */
 36 |         if (params) {
 37 |             this.params = {...this.params, ...params};
 38 |             if (this.params.snapshot && this.indexDB) {
 39 |                 this.indexDB.queryRecord('tableData', 1).then(res => {
 40 |                     if (res && res.data) {
 41 |                         const cacheData = JSON.parse(res.data)
 42 |                         Object.assign(this.dataStore, cacheData)
 43 |                         if (isVue2) {
 44 |                             this.dataStore = Vue?.observable(this.dataStore);
 45 |                         } else {
 46 |                             this.dataStore = reactive(this.dataStore);
 47 |                         }
 48 | 
 49 |                     }
 50 |                 })
 51 |             }
 52 |         }
 53 |         return MessageService.instance
 54 |     }
 55 | 
 56 |     /**
 57 |      * 原始数据设置
 58 |      * @param initialData {Object}
 59 |      */
 60 |     setInitialData(initialData) {
 61 |         if (isVue2) {
 62 |             this.dataStore = Vue?.observable(initialData);
 63 | 
 64 |         } else {
 65 |             this.dataStore = reactive(initialData);
 66 |         }
 67 |     }
 68 | 
 69 |     /**
 70 |      * 获取数据
 71 |      * @param key {string}
 72 |      */
 73 |     get(key) {
 74 |         return this.dataStore[key];
 75 |     }
 76 | 
 77 |     /**
 78 |      * 设置数据
 79 |      * @param props {Object}
 80 |      */
 81 |     set(props) {
 82 |         for (let key in props) {
 83 |             this.dataStore[key] = props[key];
 84 |         }
 85 |         if (this.params.snapshot) {
 86 |             this.takeSnapshot();
 87 |         }
 88 |     }
 89 | 
 90 | 
 91 |     /**
 92 |      * 删除缓存记录
 93 |      */
 94 |     deleteSnapshot() {
 95 |         return this.indexDB.deleteRecord('tableData', 1)
 96 |     }
 97 | 
 98 | 
 99 |     /**
100 |      * 缓存数据
101 |      */
102 |     async takeSnapshot() {
103 |         const dataStore = JSON.stringify(this.dataStore);
104 |         const res = await this.indexDB.queryRecord('tableData', 1)
105 |         if (res) {
106 |             this.indexDB.updateRecord('tableData', 1, {id: 1, data: dataStore});
107 |         } else {
108 |             this.indexDB.addRecord('tableData', {id: 1, data: dataStore});
109 |         }
110 |     }
111 | 
112 | 
113 |     /**
114 |      * 调用公共方法
115 |      * @param key {string}
116 |      * @param args {args}
117 |      */
118 |     callFunction(key, ...args) {
119 |         if (typeof this.dataStore[key] === "function") {
120 |             return this.dataStore[key](...args);
121 |         } else {
122 |             throw new Error(`${key} is not a function`);
123 |         }
124 |     }
125 | 
126 |     /**
127 |      * 消息订阅
128 |      * @param eventName {string} 事件名
129 |      * @param callback {Function} 事件
130 |      */
131 |     register(eventName, callback) {
132 |         if (!this.subscribers[eventName]) {
133 |             this.subscribers[eventName] = [];
134 |         }
135 |         this.subscribers[eventName].push(callback);
136 |     }
137 | 
138 |     /**
139 |      * 消息发布
140 |      * @param eventName eventName {string} 事件名 与消息订阅相匹配
141 |      * @param data {args} 参数
142 |      */
143 |     publish(eventName, data) {
144 |         if (this.subscribers[eventName]) {
145 |             this.subscribers[eventName].forEach(callback => {
146 |                 callback(data);
147 |             });
148 |         }
149 |     }
150 | }
151 | 
152 | export default MessageService;
153 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "data-share",
 3 |   "version": "1.0.0",
 4 |   "description": "This is a lightweight global data common state management component compatible with vue2 and vue3;这是一个兼容 vue2 和 vue3 的轻量级全局数据公共状态管理组件",
 5 |   "main": "./index.js",
 6 |   "author": "AyongNice@163.com",
 7 |   "scripts": {
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/AyongNice/data-share"
13 |   },
14 |   "publishConfig": {
15 |     "registry": "https://registry.npmjs.org/"
16 |   },
17 |   "keywords": [
18 |     "vuex",
19 |     "storage",
20 |     "轻量级全局数据共享",
21 |     "Lightweight global data sharing",
22 |     "vue2",
23 |     "vue3"
24 |   ],
25 |   "license": "ISC",
26 |   "devDependencies": {
27 |     "vite": "^4.2.1"
28 |   },
29 |   "dependencies": {
30 |     "relational-indexdb": "^1.0.8",
31 |     "vue-demi": "^0.14.6"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import {defineConfig} from 'vite'
 2 | 
 3 | const config = require("./package.json")
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |     build: {
 7 |         minify: false,
 8 |         outDir: 'dist',
 9 |         lib: {
10 |             entry: './index.ts',
11 |             formats: ['es']
12 |         },
13 |         rollupOptions: {
14 |             output: {
15 |                 entryFileNames: `[name].js`
16 |             }
17 |         }
18 |     }
19 | })
20 | 


--------------------------------------------------------------------------------