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

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

1. 全局状态管理器

在 Vue3 中，可以通过 Vue 提供的 provide 和 inject API 来实现跨组件共享数据。这种方法类似于依赖注入的概念，可以让子组件获取祖先组件提供的数据。

创建全局状态管理器

首先，我们可以创建一个全局状态管理器，例如 store.js：

import { reactive } from 'vue';

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

在根组件中提供全局状态

在根组件中，通过 provide 将全局状态注入到应用中，这样所有子组件都可以访问该状态。

<template>
  <div>
    <slot></slot>
  </div>
</template>

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

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

在子组件中注入并使用全局状态

在需要使用共享数据的组件中，通过 inject 引入该全局状态。

import { inject } from 'vue';

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

    return {
      globalStore
    };
  }
}

使用全局状态

子组件可以使用共享的全局状态，例如：

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

2. 使用 Composition API

另一种处理跨组件共享数据的方式是通过 Vue3 的 Composition API 来实现，这种方法更灵活且适用于复杂的应用场景。

创建共享状态逻辑

首先，我们可以通过 Composition API 创建一个共享状态逻辑文件 store.js：

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);
}

在根组件中提供状态

在根组件中，通过 useStore 提供共享状态。

import { useStore } from './store';

export default {
  setup() {
    useStore(); // 提供全局状态
  }
}

在子组件中使用共享状态

子组件可以通过 useGlobalStore 来获取全局状态并使用。

import { useGlobalStore } from './store';

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

    return {
      globalStore
    };
  }
}

使用共享状态

在子组件中，使用共享的状态如下：

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