“组合式函数”如何共享变量状态

[Niefee]

Vue SFC Playground

// App.vue
<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue';
import {userData} from './data.js'
const {times} = userData()
</script>

<template>
  <div>
    <button @click="times += 1">+1</button>
  </div>
  <h1>App data: {{ times }}</h1>
  <Comp></Comp> 
</template>

// Comp.vue
<script setup>
import {userData} from './data.js'
const {times} = userData()
</script>

<template>
  <div>
    <p>Comp data: {{times}}</p>
  </div>
</template>

// data.js
import { ref, onMounted, onUnmounted } from 'vue'
export function userData() {
  const times = ref(1);
  return {
    times
  }
}

若上demo, 如何实现组合式函数导出的变量，在不同组件引入，都可以同步相同状态。

[asuishi]

// data.js
import { ref, onMounted, onUnmounted } from 'vue'
const times = ref(1);
export function userData() {

  return {
    times
  }
}