vue3中创建全局数据并在不同组件中使用

在Vue3中，可以使用Vue3提供的响应式数据对象来创建全局数据，并且通过provide/inject将数据注入到不同的组件中，从而实现数据的共享和同步更新。

具体步骤如下：

1. 创建全局数据

可以使用Vue3提供的reactive函数创建响应式数据对象，例如在一个名为data.js的文件中：

import { reactive } from 'vue';

export const globalData = reactive({
  count: 0
});

2. 注入全局数据到组件中

可以在App.vue中使用provide函数将全局数据注入到组件中，例如：

import { provide } from 'vue';
import { globalData } from './data.js';

export default {
  setup() {
    provide('globalData', globalData);
  }
};

3. 使用全局数据

在需要使用全局数据的组件中，可以使用inject函数获取注入的数据，并在模板中使用。例如：

import { inject } from 'vue';

export default {
  setup() {
    const globalData = inject('globalData');
    return { globalData };
  }
};

然后可以在模板中使用globalData.count来访问全局数据，并通过修改globalData.count来更新数据。

需要注意的是，在使用全局数据时需要遵循Vue3的响应式规则，即不能直接修改对象的属性，而是需要使用Vue提供的set函数或者直接替换整个对象来更新数据。例如：

// 不能直接修改属性
globalData.count++; 

// 正确的更新方式
import { set } from 'vue';
set(globalData, 'count', globalData.count + 1);

另外，需要注意在提供数据和注入数据时，provide和inject函数需要在setup函数中使用，这是Vue3的新特性。