vuex-iframe-share

This is a package for data synchronization of vuex data in iframe in the vuejs project

English | 中文

Introduce

Engineers who use vuejs should know what vuex is! It is an essential tool in actual development. But when we use vuejs + iframe to develop applications, we will find that data communication is a headache. You need to use postMessage every time. To solve this problem, vuex-iframe-share is born. Let the vuex in the current day's Vue and the vuex in iframe share data. If your iframe doesn't use vuejs, it doesn't matter, vuex-iframe-share will store the data in the window.(local|session)Storage In.

✨ Characteristic

• Automated
• Real time change
• Customizable

🔔 Updated

• perf：store.state updateValue === originalValue situation, The set function will no longer be triggered to prevent abuse of the watch（v1.0.10）
• fix：added window.parant check to prevent use in non iframes, which may lead to deadlock (v1.0.10)
• fix：optimized refresh method execution does not pass notifications to iframe （v1.0.9）
• fix：Cancel 100ms delay transmission optimization, because delay may cause data not to be updated in time （v1.0.8）
• fix：state.set('module/data', ...): Uncaught TypeError: Cannot read property 'module' of null（v1.0.7）
• feat：working with vuex-persistedstate, new option mutationMethodName（v1.0.6）
• fix：vuexIframeShare.storage error reporting for null（v1.0.5）
• Intact Updated Docs

🔧 Requirements

• Vue.js (v2.0.0+)
• Vuex (v2.0.0+)

What is worth understanding is the principle of usingwindow.postMessage, it has some limitations to note. For example, the transmission size and so on. There are references below

• MDN window.postMessage

🔧 Installation

CDN

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

NPM

1npm install --save vuex-iframe-share

YARN

1yarn add vuex-iframe-share

📦 Method

1vuexIframeShare.parant(option)
2vuexIframeShare.child(option)
3vuexIframeShare.storage(option)

Params

1option: {
2  // share # mutual transmission (default)
3  // single # receive only and not send
4  mode?: 'single' | 'share'
5  only?: string[] // receive only the specified keys,It also includes the modules name, because the modules name is also stored in the state
6
7  // This parameter is only available in vuexIframeShare.storage Valid in.
8  // In vuejs, please use such as: `vuex-persistedstate ...` package
9  storage?: Storage // sessionStorage | localStorage (default)
10
11  mutationMethodName?: string // It will only take effect if it is used in conjunction with 'vuex-persistedstate'
12}

Usage

In VueJS

1import vuexIframeShare from "vuex-iframe-share";
2 
3const store = new Vuex.Store({
4  state: {
5    ...
6  },
7  plugins: [vuexIframeShare.parant()]
8});

In IFrame（vuejs）

1import vuexIframeShare from "vuex-iframe-share";
2 
3const store = new Vuex.Store({
4  state: {
5    ...
6  },
7  plugins: [vuexIframeShare.child()]
8});

In IFrame（not vuejs）

1import vuexIframeShare from "vuex-iframe-share";
2 
3// Mount
4const state = vuexIframeShare.storage();
5
6// Getter or Modules Getter
7const vuexData = state.get()
8const data = state.get('data')
9const moduleData = state.get('moduleName/data')
10
11// Setter or Modules Setter
12state.set('data', here is to save the data)
13state.set('moduleName/data', here is to save the data)
14
15// It is worth mentioning that after setter, there are the latest vuex results, so we can do this:
16const vuexData = state.set('data', here is to save the data)
17
18// You can also use structure assignment
19const { ... } = state.set('data', here is to save the data)

Working with vuex-persistedstate

What is vuex-persistedstate ？

• Simply put, it is to synchronize and persist the data of vuex in (local|session)Storage or other storage methods so that it can be used again after refreshing
• The details are not explained here. You can go to check：vuex-persistedstate

What are the current problems？

The data synchronized by vuex-iframe-share is only synchronized to memory, and no update is stored in storage，This is not bug，This is related to the update mechanism of vuex-persistedstate. We can do this to solve this problem

1// in `store.js`
2import vuexIframeShare from "vuex-iframe-share";
3 
4const store = new Vuex.Store({
5  mutations: {
6    // Add refresh method here, recommended use Object.assign
7    save(state, payload) {
8      Object.assign(state, payload)
9    }
10    ...
11  },
12  plugins: [
13    //In principle, let 'vuex iframe share' execute once store.commit ('save ', {}), execution will trigger the update!
14    //Note: there is a value when executing 'Save': '{}' if you write like me above, you don't need to do any processing, otherwise you need to filter '{}'
15    //Or write it in the module: 'modulename / save', of course, it doesn't make any difference, just to trigger the refresh
16    vuexIframeShare.parant({ mutationMethodName: 'save' })
17  ]
18});
19

If you find any problem, you can give me the issue feedback in GitHub. I will reply after receiving it. Thank you for using this plug-in