直接上教程
.新创建一个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>
感谢观看
