vue3 globalData 的使用方法

直接上教程

.新创建一个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>

感谢观看