# useSharedRef
Share the same value across multiple tabs (within the same origin) in the same browser.
WARNING
This relies on BroadcastChannel API. Safari doesn't support it.
TIP
You can use short version refShared
# Parameters
import { useSharedRef } from "vue-composable";
const sharedRef = useSharedRef(name, defaultValue?);
Parameters | Type | Required | Default | Description |
---|---|---|---|---|
name | String | true | Name of the BroadcastChannel | |
defaultValue | T | false | undefined | Default value |
# State
The useSharedRef
function exposes the following reactive state:
import { useSharedRef } from "vue-composable";
const { supported, id, data, master, mind, editable, targets } = useSharedRef();
State | Type | Description |
---|---|---|
supported | boolean | Returns true if BroadcastChannel API is supported |
id | number | Id of the reference |
data | Ref<T> | Value |
mind | Ref<RefSharedMessageType> | This describes on how this ref interacts with other tabs check |
master | Ref<boolean> | If this instance is master instance |
editable | Ref<boolean> | If this instance is editable |
targets | Ref<number[]> | Connected ref |
# Methods
The useSharedRef
function exposes the following methods:
import { useSharedRef } from "vue-composable";
const { ping, setMind, addListener } = useSharedRef();
Signature | Description |
---|---|
ping() | sends a ping to listeners |
setMind(MindMode) | sets all the listeners to the same mode |
addListener | adds a callback to Broadcast Channel message |
# Information
# Mind
This is how the multiple tabs interact with each other, is possible to have two modes:
- 0: Hive (default)
- 1: Master
const { setMind } = useSharedRef();
// javascript
setMind(0); // set mind to HIVE
setMind(1); // set mind to MASTER
// typescript
import { SharedRefMind } from "vue-composable";
setMind(SharedRefMind.HIVE); // set mind to HIVE
setMind(SharedRefMind.MASTER); // set mind to MASTER
TIP
When a useSharedRef(id)
is called it will try to sync with other tabs, setMind
only needs to set in one intance.
# HIVE MODE
This interaction allows the ref
to be updated by everyone.
If you have 5 tabs open every tab is allowed to update and everyone will sync to the latest modified value.
# MASTER MODE
This interaction only allows the master
to send updates to the other tabs. In master
mode if the reference is not master the data
value changes will be ignored
TIP
If you want to change the master instance, please call setMind(1)
on the instance you want to control, this will update all of the other.
WARNING
If the master instance gets destroyed (the component unmounted or tab closed) a new master
will be assigned automatically (it will be the oldest instance)
# Example
Supported: false
Mind: HIVE
IsMaster: false
targets: 0
# Code
<template>
<div>
<p>Supported: {{ supported }}</p>
<p>
Mind: {{ mindDescription }} <button @click="changeMind">Change</button>
</p>
<p>IsMaster: {{ master }}</p>
<input v-model="data" :disabled="!editable" />
<p>targets: {{ targets.length }}</p>
</div>
</template>
<script>
import { useSharedRef } from "vue-composable";
import { computed } from "@vue/composition-api";
export default {
name: "shared-ref-example",
setup() {
const sharedRef = useSharedRef("test-shared-ref", 0);
const mindDescription = computed(() => {
switch (sharedRef.mind.value) {
case 0:
return "HIVE";
case 1:
return "MASTER";
}
});
const changeMind = () => {
sharedRef.setMind((sharedRef.mind.value + 1) % 2);
};
return {
...sharedRef,
mindDescription,
changeMind
};
}
};
</script>
# refShared
Short version, this uses useSharedRef in HIVE mode.
# Parameters
import { refShared } from "vue-composable";
const refShared = refShared(defaultValue?, id?);
Parameters | Type | Required | Default | Description |
---|---|---|---|---|
defaultValue | T | false | undefined | Default value |
id | String | false | undefined | BroadcastChannel name, if not provided it will get be default getCurrentInstance().$vnode.tag this will allow have 1 shared reference per component |
# State
The refShared
function returns a reactive ref
variable:
import { refShared } from "vue-composable";
const myShared = useSharedRef();
# Example
To test please open 2 or more tabs and edit the input box
# Code
# Code
<template>
<div>
<p>
To test please open 2 or more tabs and edit the input box
</p>
<input v-model="myRefVar" />
</div>
</template>
<script>
import { refShared } from "vue-composable";
export default {
name: "ref-shared-example",
setup() {
const myRefVar = refShared("Hello world");
return { myRefVar };
}
};
</script>
← TailwindCSS vModel →