vuex-iframe-sync
v1.4.5
Vuex state synchronization between iframe/window
100/weekUpdated 3 years agoMITUnpacked: 822.7 KB
Published by l-chris
npm install vuex-iframe-sync
vuex-iframe-sync
English | 中文
Vuex state synchronization between iframe/window
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
- Vue.js (v2.0.0+)
- Vuex (v2.1.0+)
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.
- MDN window.postMessage
- MDN Structured_clone_algorithm
🔧 Installation
$3
``
bash
`
$3
`bash
npm install vuex-iframe-sync --save
`
$3
`bash
yarn add vuex-iframe-sync
`
📦 Examples
- live example
- with webpack
- simple
📦 Usage
`js
// in parent's component with iframe
// 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
$3
Send state changes payload to iframes through postMessage API while parent state change.
ids : 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 : convert payload before pass to iframes.
$3
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 : convert payload before pass to parent.
- created : call after iframe created. id: iframeId、store: this.store、send：parent.$store.commit
- destroyed : call after iframe destroyed. id: iframeId、store: this.store、send：parent.$store.commit
Build Setup
` bash
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