English | 中文
Vuex state synchronization between iframe/window
Your star is the greatest encouragement to me.
- support iframes/window sync
- initialization sync when iframe loaded
- configure the sync behavior for your specific needs
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.
<script src="https://cdn.jsdelivr.net/npm/vuex-iframe-sync/dist/vuex-iframe-sync.umd.js"></script>npm install vuex-iframe-sync --saveyarn add vuex-iframe-sync// 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()
]
})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.
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.commitdestroyed <Function(id, store, send)>: call after iframe destroyed. id: iframeId、store: this.store、send<Function(type, payload)>：parent.$store.commit
# 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- Need your advice
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent