# 数据SDK

# 简介

# 背景

在插件开发过程中，时常会需要主应用提供一些必要的数据，而这些数据又分为全局数据和页面数据，比如：用户信息、用户token等全局参数以及流程id等页面参数。插件作为数据的使用方，通常是没有权限修改这些数据的(或只可修改主应用允许的指定的数据)。若是使用 vue的props 或是 @esign/plugin-core的context api是无法实现数据的隔离功能。

# 价值及意义

为解决背景中遇到的问题，使插件获取到的数据源即不可被插件修改，又具有双向数据绑定的特性。而实现的用于监听、获取隔离后数据和修改指定数据的SDK功能包。

# 安装

yarn add @esign/bridge-store -S

# 使用

import Vue from 'vue'
import storeSDK from '@esign/bridge-store'

Vue.use(storeSDK, {
  state, // 下放给插件的数据源
  store, // 主应用 store
  router, // 主应用 router
})

# API

• install(store: any, data: Record<string, any>, router: any) 注册 storeSDK 方法
  • @param state: 下放给插件的数据源
  • @param store: 主应用 store
  • @param router: 主应用路由
  • @returns void
  • 备注: 初始化实例后，实例会自动绑定到 window.esignbridge.$store 下，用户可调此实例 设置、删除、获取 全局/页面数据源。
• window.esignbridge.$store 实例
  • getGlobalData(key?: string) 获取全局数据源；
    • @param key: 键, 可选; 若不传，则返回当前系统下所有的全局数据源
    • @returns value
    • 注意: 1.获取的数据，只能预览，不可修改。2.返回的数据具有 vue双向数据绑定 的特性
  • getPageData(key?: string) 获取页面数据源；
    • @param key: 键, 可选; 含义: 获取当前页面下的 {key} 数据; 若不传，则返回当前页面下所有的数据源
    • @returns value
    • 注意: 1.获取的数据，只能预览，不可修改。2.返回的数据具有 vue双向数据绑定 的特性
  • getRegisterData(key: string) 获取注册的数据源；
    • @param key: 键, 必填; 含义: 获取已经注册的数据源，不存在的话返回 undefined
    • @returns value
    • 注意: 1.获取的数据，只能预览，不可修改。2.返回的数据具有 vue双向数据绑定 的特性
  • registerData(key: string, data: any) 注册数据
    • @param key: 键, 必填; 含义: 注册数据的 key 值
    • @param data: 数据源, 必填; 含义: 要注册的数据
    • @returns null
    • 注意: 注册的数据与 global(全局数据)和page(页面数据)同级
  • setStoreData(key: string, data: any, async: boolean = false) 修改主应用数据源
    • @param key: 主应用 store 中的 mutations 或 actions 的 Key
    • @param data 参数
    • @param async 是否异步，false 为 commit， true 为 dispatch
    • @returns null
    • 注意: 建议仅监听存在的数据。
  • $watch(key: string, cb: Function, type: string = 'global') 数据监听器
    • @param key: 要监听的 Key，例如: 若 isPage: true, 意为监听当前页面下的 Key 数据变化
    • @param cb 回调函数，包含 2 个参数: (newValue, oldValue)
    • @param type 监听指定变化的数据，可选值为: global(全局数据)、page(页面数据)、register(注册数据)
    • @returns null
    • 注意: 建议仅监听存在的数据。

# Method

# 案例

loadPlugin.ts

import Vue from 'vue'
import router from 'router'
import store from 'store'
import storeSDK from '@esign/bridge-store'

Vue.use(storeSDK, {
  store, // 主应用 store
  data, // 下放给插件的 data
  router, // 主应用 router
})

store-event-plugin 插件案例

export default {
  mounted() {
    // 监听数据变化
    // 监听全局数据源的变化
    window.esignbridge.$store.$watch('title', (value, oldValue) => {
      console.log('---title 数据---', value, oldValue)
    })
    // 监听当前页面数据源的变化
    window.esignbridge.$store.$watch('title', (value, oldValue) => {
      console.log('---当前页面 title 数据---', value, oldValue)
    }, 'page')
  }
}

useProxyStore 使用案例

import { defineComponent, reactive, toRefs } from '@vue/composition-api'
import { useProxyStore } from '@esign/bridge-store'

export default defineComponent({
  name: 'HomeView',
  setup(props, context) {
    const data = reactive({
      msg: 'Welcome to Your Vue.js + TypeScript App',
      testObjectData: {
        label: 'testObjectData'
      },
      testArrayData: [
        {
          label: 'testArrayData',
          value: '0'
        },
      ]
    })

    return {
      ...toRefs(data)
    }
  },
  render() {
    return (
      <div class="home">
        <EsExtensionPoint
          name="hello-world-epu"
          testObjectData={useProxyStore(this.testObjectData)}
          testArrayData={useProxyStore(this.testArrayData)} />
      </div>
    )
  },
})

# 事件中心

传送门