直接上教程

.新创建一个data.js它可以和main.js平级也可以在store文件夹下面都行，无非就是引用的时候前缀多一个单词少一个单词这样

data.js:

从vue上面引入reactive ，然后它可以创建一个也可以创建两个可以任意名称 A或B或C都可以

//data.js
import { reactive } from 'vue';export const globalData = reactive({count: 111,index:'嘿'
});export const zzz = reactive({count: 222,index:'啧'});

app.vue

从'./store/data';上面引入创建的两个globalData,zzz

<template><router-view/>
</template><script setup>
import { provide } from 'vue';
import { globalData,zzz } from './store/data';provide('globalData', globalData);
provide('zzz', zzz);
</script>

home.vue

可以通过名称调用下面自己创建的变量

比如{{ zzz.index }}

<template><div>
<h1>1：{{ globalData.count }}1：{{ globalData.index }}
</h1>
<h1>2：{{ zzz.index }}
</h1></div>
</template>
<script setup>
import { ref,inject } from 'vue';
const globalData = inject('globalData')
const zzz = inject('zzz')
</script>

如果想加或者减（调用）

一个简单的例子

<template><div><div @click="jia">加</div><div @click="jian">减</div>
<h2>动态改变：{{ globalData.count }}
</h2></div>
</template><script setup>
import { ref,inject } from 'vue';const globalData = inject('globalData')
const zzz = inject('zzz')// 定义增加 globalData.count 的方法
const jia = () => {globalData.count += 1;
};// 定义减少 globalData.count 的方法
const jian = () => {globalData.count -= 1;
};</script>

感谢观看