Skip to content
On this page

useRefShared

Short version, this uses useSharedRef in HIVE mode.

Parameters

typescript
import { useRefShared } from '@elonehoo/pistachio'

const refShared = useRefShared(defaultValue?, id?)
import { useRefShared } from '@elonehoo/pistachio'

const refShared = useRefShared(defaultValue?, id?)
ParametersTypeRequiredDefaultDescription
defaultValueTfalseundefinedDefault value
idstringfalseundefinedBroadcastChannel name, if not provided it will get be default getCurrentInstance().$vnode.tag this will allow have 1 shared reference per component

State

The useRefShared function returns a reactive ref variable:

typescript
import { useRefShared } from '@elonehoo/pistachio'

const myShared = useRefShared()
import { useRefShared } from '@elonehoo/pistachio'

const myShared = useRefShared()

Example

To test please open 2 or more tabs and edit the input box

vue
<script setup lang="ts">
import { useRefShared } from '@elonehoo/pistachio'

const myRefVar = useRefShared('Hello world')
</script>

<template>
  <div>
    <p>
      To test please open 2 or more tabs and edit the input box
    </p>
    <input v-model="myRefVar">
  </div>
</template>
<script setup lang="ts">
import { useRefShared } from '@elonehoo/pistachio'

const myRefVar = useRefShared('Hello world')
</script>

<template>
  <div>
    <p>
      To test please open 2 or more tabs and edit the input box
    </p>
    <input v-model="myRefVar">
  </div>
</template>

Released under the MIT License.