Vue3 中如何处理跨组件共享数据的需求？

在Vue3中处理跨组件共享数据的需求是一个常见且重要的问题，我们可以通过提供一个全局状态管理器或者使用Vue3提供的Composition API来实现。接下来，我将详细介绍这两种方法的实现方式。

1. 全局状态管理器

在Vue3中，可以通过Vue提供的provide和inject来实现跨组件共享数据。首先我们需要创建一个全局状态管理器，例如store.js：

import { reactive } from 'vue';

export const store = reactive({
  count: 0,
  increment() {
    store.count++;
  },
  decrement() {
    store.count--;
  }
});

然后，在需要使用共享数据的组件中，可以通过inject来引入该全局状态：

import { inject } from 'vue';
import { store } from './store';

export default {
  setup() {
    const globalStore = inject('store');

    return {
      globalStore
    };
  }
}

最后，在根组件中使用provide将全局状态注入应用程序：

<template>
  <div>
    <span>Count: {{ globalStore.count }}</span>
    <button @click="globalStore.increment()">Increment</button>
    <button @click="globalStore.decrement()">Decrement</button>
  </div>
</template>

<script>
import { provide } from 'vue';
import { store } from './store';

export default {
  setup() {
    provide('store', store);
  }
};
</script>

2. Composition API

另一种处理跨组件共享数据的方式是使用Vue3提供的Composition API。通过reactive和provide、inject函数来实现：

import { reactive, provide, inject } from 'vue';

const globalStoreKey = Symbol();

export function useStore() {
  const store = reactive({
    count: 0,
    increment() {
      store.count++;
    },
    decrement() {
      store.count--;
    }
  });

  provide(globalStoreKey, store);

  return store;
}

export function useGlobalStore() {
  return inject(globalStoreKey);
}

在组件中使用useGlobalStore来获取全局状态，例如：

import { useGlobalStore } from './store';

export default {
  setup() {
    const globalStore = useGlobalStore();

    return {
      globalStore
    };
  }
}

通过以上两种方式，我们可以很方便地实现在Vue3中处理跨组件共享数据的需求。

更多面试题请点击：web前端高频面试题_在线视频教程-CSDN程序员研修院

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作