How do you share logic between components using the Composition API?

在Vue 3中，Composition API 提供了一种新的方式来组织和重用组件逻辑。与之前的Options API相比，Composition API更灵活，也更易于管理复杂组件的状态和逻辑。以下是如何在组件之间共享逻辑的步骤和示例：

步骤 1：创建一个可重用的Composition Function

首先，我们需要创建一个Composition Function，这是一个封装了可重用逻辑的JavaScript函数。这个函数可以返回一些响应式的数据、方法或者其他Composition API的特性，比如computed属性和watch。

示例：

假设我们有一个用于处理用户信息的逻辑，我们可以创建一个名为 useUser 的Composition Function。

javascript
import { ref, computed } from 'vue';

export function useUser() {
    const users = ref([]);
    const addUser = (user) => {
        users.value.push(user);
    };
    const userCount = computed(() => users.value.length);

    return { users, addUser, userCount };
}

步骤 2：在组件中使用这个Composition Function

创建好了Composition Function后，你可以在任何组件中使用它，以便共享逻辑。

示例：

在两个不同的组件中使用 useUser 来管理用户数据。

javascript
// Component A
import { useUser } from './useUser';

export default {
    setup() {
        const { users, addUser, userCount } = useUser();
        
        return { users, addUser, userCount };
    }
}

// Component B
import { useUser } from './useUser';

export default {
    setup() {
        const { users, addUser } = useUser();
        
        const addUserFromB = (name) => {
            addUser({ name });
        };

        return { users, addUserFromB };
    }
}

步骤 3：维护状态的独立性

虽然使用Composition API可以在不同组件间共享逻辑，但要注意不同实例之间状态的独立性。如果需要各个组件保持数据状态独立，确保在Composition Function中使用函数或者工厂模式来返回新的实例。

javascript
export function useUser() {
    const users = ref([]);

    return {
        users: ref([]),
        addUser: (user) => users.value.push(user),
        userCount: computed(() => users.value.length)
    };
}

使用这种模式，每次在组件中调用 useUser() 时，都会创建新的响应式引用，确保数据不会在不同的组件实例间共享。

总结

通过以上步骤，你可以看到使用Composition API在Vue 3中共享逻辑是非常灵活和强大的。它不仅可以使代码更加模块化，还能提高开发效率和维护性。确保根据你的应用需求合理地设计Composition Functions和组件逻辑，可以最大化利用这一API的优势。