vuex-iframe-sync

    1.4.5 • Public • Published

    vuex-iframe-sync

    English | 中文

    Vuex state synchronization between iframe/window

    build npm downloads

    Your star is the greatest encouragement to me.

    ✨ Features:

    • support iframes/window sync
    • initialization sync when iframe loaded
    • configure the sync behavior for your specific needs

    🔧 Requirements

    Note window.postMessage has limition on message, works like JSON.parse() and JSON.stringfy().If you have trouble with it, configure a convert function in broadcast and transfer API.

    🔧 Installation

    CDN

    <script src="https://cdn.jsdelivr.net/npm/vuex-iframe-sync/dist/vuex-iframe-sync.umd.js"></script>

    NPM

    npm install vuex-iframe-sync --save

    YARN

    yarn add vuex-iframe-sync

    📦 Examples

    📦 Usage

    // in parent's component with iframe
    <iframe id="frameId1"/>
    <iframe id="frameId2"/>
     
    // in parent's store.js
    import {broadcast} from 'vuex-iframe-sync'
     
    export default new Vuex.store({
      // ...
      plugins: [
        broadcast('frameId1,frameId2')
      ]
    })
     
    // in iframe's store.js
    import {transfer} from 'vuex-iframe-sync'
     
    export default new Vuex.store({
      // same state and mutations with parent
      plugins: [
        transfer()
      ]
    })

    🔧 API

    broadcast(ids: String, [options])

    Send state changes payload to iframes through postMessage API while parent state change.

    ids <String|Array>: frameIds split by ',' or [{id: iframeId, origin: iframeOrigin}...]

    options : The following options can be provided to configure the parent behavior for your specific needs:

    • convert <Function(payload)>: convert payload before pass to iframes.

    transfer([options])

    Receive state changes from parent. Send state changes to parent while self state change.

    options : The following options can be provided to configure the iframe behavior for your specific needs:

    • convert <Function(payload)>: convert payload before pass to parent.
    • created <Function(id, store, send)>: call after iframe created. id: iframeId、store: this.store、send<Function(type, payload)>:parent.$store.commit
    • destroyed <Function(id, store, send)>: call after iframe destroyed. id: iframeId、store: this.store、send<Function(type, payload)>:parent.$store.commit

    Build Setup

    # serve with with-webpack example at localhost:8080
    npm run dev
     
    # serve with simple example at localhost:8080
    npm run dev:simple
     
    # test with jest
    npm run test
     
    # build for production with minification
    npm run build
     
    # build for production with live example
    npm run build:docs

    🛣 Pending

    • Need your advice

    🥂 License

    MIT

    Install

    npm i vuex-iframe-sync

    DownloadsWeekly Downloads

    33

    Version

    1.4.5

    License

    MIT

    Unpacked Size

    823 kB

    Total Files

    45

    Last publish

    Collaborators

    • l-chris