Vue 3 中如何使用 Composition API 实现组件间的状态共享？

Vue 3 中如何使用 Composition API 实现组件间的状态共享？

回答：
在 Vue 3 中，可以使用 Composition API 结合 provide/inject 或创建一个可复用的响应式状态模块（通常称为“组合式函数”或“composable”）来实现组件间的状态共享。更常见且推荐的方式是使用一个独立的响应式对象（例如通过 reactive 或 ref 创建），并在多个组件中导入使用，从而实现状态共享。

示例：

1. 创建一个共享状态模块（store.js）：

import { reactive, readonly } from 'vue';

const state = reactive({
  count: 0
});

const increment = () => {
  state.count++;
};

export const useCounterStore = () => {
  return {
    state: readonly(state),
    increment
  };
};

2. 在任意组件中使用：

<script setup>
import { useCounterStore } from './store';

const { state, increment } = useCounterStore();
</script>

<template>
  <div>{{ state.count }}</div>
  <button @click="increment">+</button>
</template>

解析：

• Vue 3 的 Composition API 允许我们将逻辑封装在函数中（即 composables），这些函数可以被多个组件复用。
• 通过 reactive 创建响应式状态，并通过 readonly 包装防止外部直接修改，确保状态只能通过定义的方法变更（类似 Vuex 的 mutations）。
• 这种方式无需引入 Vuex 或 Pinia（虽然 Pinia 是官方推荐的状态管理库），适用于中小型应用的简单状态共享。
• 如果需要更复杂的状态管理（如时间旅行、插件系统等），应使用 Pinia。

注意：这种方式依赖 JavaScript 模块的单例特性，即多次 import 同一个模块时，其内部状态是共享的。