vuex-iframe-sync is the synchronization of the Vuex state between iframes/windows.

Features:

• Support iframes/sync window
• Sync configuration when the iframe is loaded
• Configure sync behavior for your own needs

Note: window.postMessage has a limitation on the message, and it works like JSON.parse() and JSON.stringfy(). If you have a problem with that, configure a transform function in the broadcast and transfer API.

How to make use of it:

Installation:

NPM
npm install vuex-iframe-sync --save

YARN
yarn add vuex-iframe-sync

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 changes.

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 passing to iframes.

transfer([options])

Receive state changes from a parent. Send state changes to parent while self-state changes.

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

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

vuex state synchronization between iframes, vuex-iframe-sync plugin/github

See Demo And Download

Official Website(L-Chris): Click Here

This superior jQuery/javascript plugin is developed by L-Chris. For extra advanced usage, please go to the official website.