Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/l-chris/vuex-iframe-sync
Vuex state synchronization between iframe/window
https://github.com/l-chris/vuex-iframe-sync
iframe sync vue vuex
Last synced: 15 days ago
JSON representation
Vuex state synchronization between iframe/window
- Host: GitHub
- URL: https://github.com/l-chris/vuex-iframe-sync
- Owner: L-Chris
- License: mit
- Created: 2018-03-04T09:12:08.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:21:45.000Z (about 2 years ago)
- Last Synced: 2024-12-12T19:52:37.675Z (22 days ago)
- Topics: iframe, sync, vue, vuex
- Language: JavaScript
- Homepage: https://l-chris.github.io/vuex-iframe-sync/
- Size: 1.98 MB
- Stars: 104
- Watchers: 4
- Forks: 18
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://vuejs.org) (v2.0.0+)
- [Vuex](http://vuex.vuejs.org) (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](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
- [MDN Structured_clone_algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)
## 🔧 Installation
### CDN
```bash
```
### NPM
```bash
npm install vuex-iframe-sync --save
```
### YARN
```bash
yarn add vuex-iframe-sync
```
## 📦 Examples
- [live example](https://l-chris.github.io/vuex-iframe-sync/)
- [with webpack](https://github.com/L-Chris/vuex-iframe-sync/tree/develop/examples/with-webpack)
- [simple](https://github.com/L-Chris/vuex-iframe-sync/tree/develop/examples/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
### broadcast(ids: String, [options])
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.
### 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 `: 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](http://opensource.org/licenses/MIT)