轻量 小 简约 而不简单 好学不难

vue-data-share

组件公共数据状态共享

This is a lightweight global data common state management component compatible with vue2 and vue3:

这是一个兼容 vue2 和 vue3 的轻量级全局数据公共状态管理组件

一 :框架兼容:

他可以运行在vue@2.6.14 至 vue@3.2.47 (也就是我们常说的vue2和vue3)版本

二 : 他可以帮你做什么?

他可以帮你在vue框架中实现 跨组件进行数据共享!

说到vue跨组件数据共享大家会想到 vueX. pain 等组件 该组件与她不同点在于 他是一个非常轻量级别 只有4KB大小 并且 他是一个非常容易掌握学习的组件,使用起来非常简单, 我们经常称之为 无脑傻瓜式用法! 但是我们不是傻瓜 我们都是优秀有趣的前端工程师

三: 他应该如果下载使用?

npm i  vue-data-share

介绍下该库方法信息

方法名	介绍	入参字段类型	入参介绍
VueDataShare	组件构造函数	Object	Parma全局数据共享组件的配置信息见下方详情介绍
setInitialData	原始公共数据	Object<any,any>	原始数据 通常在mian.js文件设置可以设置全局的 基础数据 对象以及 函数
get	获取全局基本数据值	string	传入原始数据字段的key 即可响应式的获取数据
set	设置全局基本数据值	string	传入原始数据字段的key 即可响应式的设置数据
callFunction	调用公共方法	string ,args	第一个参数为传入原始数据函数名的key 方法入参数,第二个参数为 该方法的入参
register	消息订阅事件	string, Funticon	定于一个函数名,以及函数体.使用示例见下方
publish	消息事件发布	string ,args	发布制定的消息事件名称,传入函数参数使用示例见下方
deleteSnapshot	删除缓存记录	-	删除缓存数据

Parma 字段介绍

字段名	类型	介绍
snapshot	boolean	是否缓存全局公共数据数据; 数据将缓存浏览器indexDB 清除缓存调用deleteSnapshot方法,true缓存 ; 默认false不缓存

vue2版本使用示例

Main.js 文件 setInitialData 设置原始数据

1import Vue from 'vue'
2import App from './App.vue'
3import router from "@/router";
4Vue.config.productionTip = false
5import VueDataShare from 'vue-data-share'
6const vueDataShare = new VueDataShare({snapshot: true})
7vueDataShare.setInitialData({
8    num: 1, 
9    list: [{
10        name: '河南省', num: 18, child: [{
11            name: '日本县', num: 1
12        }]
13     }], 
14   logout: () => {
15        console.log('退出登录')
16    }
17})
18Vue.prototype.$vueDataShare = vueDataShare
19new Vue({
20    router,
21    render: h => h(App),
22}).$mount('#app')

在组件、页面组件中使用 get获取数据 、 set设置数据

App.vue 在app页面获取 num

1<template>
2  <div id="app">
3    {{ $vueDataShare.get('num') }}
4    <router-view/>
5  </div>
6</template>
7<script>
8export default {
9  name: 'App',
10}

在其中一个组件使用set方法设置数据时候、真个项目所有组件用到改值都会统一同步

1<template>
2  <div>
3    <h1>
4      公共数据num数值: {{ $vueDataShare.get('num') }}
5    </h1>
6    <div class="three">
7      <dd v-for="(item,index) in $vueDataShare.get('list')" :key="index">
8        {{ item.name }}
9        {{ item.num }}
10        <p v-for="(child,indexK) in item.child" :key="indexK">
11          {{ child.name }} 
12          <span>{{ child.num }}</span>
13        </p>
14      </dd>
15    </div>
16    <button @click="setNum">全局数据设置++</button>
17    <button @click="logout">logout</button>
18    <button @click="getList">getList</button>
19    <button @click="chanListNum">chanListNum</button>
20  </div>
21</template>
22<script>
23import Vue, {defineComponent} from 'vue'
24export default defineComponent({
25  name: "page1",
26  methods: {
27    //设置全局 num 值
28    setNum() {
29      let num = this.$vueDataShare.get('num');
30      num++
31      this.$vueDataShare.set({num})
32    },
33    //调用公共方法退出登陆
34    logout() {
35      this.$vueDataShare.callFunction('logout')
36    },
37    //获取全局list数据
38    getList() {
39      const list = this.$vueDataShare.get('list')
40      console.log('list', list)
41    },
42    //设置全局list数据值
43    chanListNum() {
44      const list = this.$vueDataShare.get('list')
45      list[0].num = 100
46    }
47  }
48})
49</script>

调用公共方法 callFunction

调用原始数据中封装的公共方法 我们只需要调用 组件的callFunction 方法 传入对应函数字段名即可

1<script>
2import Vue, {defineComponent} from 'vue'
3export default defineComponent({
4  name: "page1",
5  methods: {
6    //调用公共方法退出登陆
7    logout() {
8      this.$vueDataShare.callFunction('logout')
9    },
10  }
11})
12</script>

跨组件通信 register 与 publish

vue-data-share 组件帮你提供了跨页面夸组件之间的通信方案功能就是 消息订阅与发布,那如何使用他呢

在通知页面组件中 注册一个自定义事件 定一个名字 requestList

1<script>
2import Vue, {defineComponent} from 'vue'
3export default defineComponent({
4  name: "page1",
5  mounted() {
6    this.$vueDataShare.register('requestList', (parmas) => {
7      console.log(parmas)
8    })
9  },
10})
11</script>

在通知页面中,我们只需要 调用publish方法发送消息, 被通知页面将会收到消息及参数,来完成我们的业务逻辑需求

1<script>
2export default {
3  name: 'App',
4  methods: {
5    message() {
6      this.$vueDataShare.publish("requestList", "Hello, World!");
7    }
8  }
9}
10</script>

Vue3版本使用示例

我们使用ts为大家示例

main.js文件 如同vue2一样 在main.js引入组件库 设置原始默认数据,并且可以设置是否缓存数据

import {createApp} from 'vue'
import App from './App.vue'
import VueDataShare from 'vue-data-share'
const vueDataShare:VueDataShare = new VueDataShare({snapshot: true});
vueDataShare.setInitialData({
    num: 1,
    loginOut: () => {
        console.log('loginOut')
    },
})
createApp(App).mount('#app')

App.vue文件

1<template>
2  <HelloWorld></HelloWorld>
3  <h1>{{ vueDataShare.get('num') }}</h1>
4  <button @click="num">++</button>
5  <button @click="loginOut">退出登陆</button>
6</template>
7
8<script lang="ts" setup>
9import VueDataShare from 'vue-data-share';
10import HelloWorld from './components/HelloWorld.vue';
11
12const vueDataShare: VueDataShare = new VueDataShare({snapshot: false});
13//设置全局num字段数据
14const num = (): void => {
15  vueDataShare.set({num:vueDataShare.get('num')++})
16}
17//设置全局公共方法
18const loginOut = (): void => {
19  vueDataShare.callFunction('loginOut')
20}
21//注册跨页面通信事件
22vueDataShare.register('request', (callback) => {
23  callback({name: 'ayong'})
24})
25console.log('全局原始数据num获取-----', vueDataShare.get('num'))
26
27</script>
28

HelloWorld组件

1<template>
2  <button @click="vueDataSharePage">通信</button>
3  <h1>{{ vueDataShare.get('num') }}</h1>
4</template>
5
6<script setup lang="ts">
7import VueDataShare from 'vue-data-share';
8
9const vueDataShare: VueDataShare = new VueDataShare();
10
11defineProps<{ msg: string }>()
12
13const vueDataSharePage = () => {
14  //发送消息通知
15  vueDataShare.publish('request', (res) => {
16    console.log('通信回调参数', res)
17  })
18}
19</script>

以上vue3 使用示例我们一次性列举了 设置原始数据、获取全局数据、设置全局数据、夸组件通信消息订阅与发布的示例

与vue2 唯一不同的是VueDataShare没有挂载到全局this ,因为在vue3中没有this,所有每个组件需要引入自定义函数

其他所有的功能以及使用方式 vue2版本与vue3都一样的,这里我们不在重复描述每一个方法功能

轻量 小 简约 而不简单 好学不难