如何理解和使用 VueUse 的 createSharedComposable？

terry 16小时前阅读数 10 #Vue

在 Vue 开发中，VueUse 是一个非常实用的工具库，其中的 createSharedComposable 更是一个独特且强大的函数，那究竟该如何理解和使用它呢？

createSharedComposable 是什么？

createSharedComposable 是 VueUse 提供的一个函数，它的作用是创建一个可共享的组合式函数，在 Vue 的组合式 API 中，我们经常会编写一些组合式函数来封装逻辑，而普通的组合式函数在不同组件中使用时，可能会存在状态隔离等问题，createSharedComposable 则打破了这种限制，它可以让我们创建的组合式函数在多个组件实例之间共享状态。

为什么需要 createSharedComposable？

（一）跨组件状态共享

在实际项目中,我们可能会有这样的需求：多个组件需要访问和修改同一个状态，比如一个全局的用户登录状态，多个页面组件都需要根据这个状态来显示不同的内容，如果使用普通的组合式函数，每个组件实例都会有自己独立的状态副本，无法实现真正的共享，而 createSharedComposable 就可以解决这个问题，它能让多个组件共享同一个状态。

### （二）简化代码逻辑

当我们需要在多个组件中复用一些复杂的逻辑且涉及共享状态时,使用 createSharedComposable 可以避免重复编写相似的代码，我们只需要在一个地方定义好这个可共享的组合式函数，然后在多个组件中引入使用即可，大大提高了代码的复用性和可维护性。

如何使用 createSharedComposable？

（一）基本使用步骤

导入函数：首先从 VueUse 中导入 createSharedComposable 函数。
```
import { createSharedComposable } from '@vueuse/core'
```

定义组合式函数：创建一个普通的组合式函数，这里面可以包含我们想要共享的逻辑和状态。

const useSharedData = () => {
 const sharedState = ref('initial value')
 const updateSharedState = (newValue) => {
     sharedState.value = newValue
 }
 return {
     sharedState,
     updateSharedState
 }
}

使用 createSharedComposable 包装：将定义好的组合式函数用 createSharedComposable 进行包装。
```
const useSharedDataComposable = createSharedComposable(useSharedData)
```
在组件中使用：在组件中引入并使用包装后的组合式函数。
```
import { useSharedDataComposable } from './path/to/your/composable'
export default {
 setup() {
     const { sharedState, updateSharedState } = useSharedDataComposable()
     // 可以在这里对 sharedState 进行操作等
     return {
         sharedState,
         updateSharedState
     }
 }
}
```
（二）示例说明

假设我们有一个“购物车”的场景，我们可以创建一个 useCart 的组合式函数，用 createSharedComposable 包装后，在多个组件（比如商品列表组件、购物车详情组件等）中使用。
```javascript import { createSharedComposable, ref } from '@vueuse/core'

const useCart = () => { const cartItems = ref([]) const addToCart = (item) => { cartItems.value.push(item) } const removeFromCart = (index) => { cartItems.value.splice(index, 1) } return { cartItems, addToCart, removeFromCart } }

const useCartComposable = createSharedComposable(useCart)

<p>在商品列表组件中，用户点击“加入购物车”按钮时，调用 addToCart 方法：</p>
```javascript
import { useCartComposable } from './cartComposable'
export default {
    setup() {
        const { addToCart } = useCartComposable()
        const handleAddToCart = (item) => {
            addToCart(item)
        }
        return {
            handleAddToCart
        }
    }
}

在购物车详情组件中,我们可以直接访问 cartItems 来显示购物车中的商品：

```javascript import { useCartComposable } from './cartComposable' export default { setup() { const { cartItems } = useCartComposable() return { cartItems } } } ```

这样,两个组件就共享了同一个购物车的状态，实现了跨组件的状态共享和逻辑复用。

注意事项

（一）状态的响应式

由于 createSharedComposable 包装的是组合式函数，而组合式函数中我们通常使用 Vue 的响应式 API（如 ref、reactive 等）来定义状态，所以要确保在组合式函数内部正确使用这些响应式 API，这样在多个组件中共享状态时，才能实现数据的响应式更新，视图也能及时刷新。

### （二）避免循环依赖

在使用 createSharedComposable 创建的组合式函数时，要注意避免出现循环依赖的情况，比如一个组合式函数 A 依赖另一个组合式函数 B，而组合式函数 B 又反过来依赖组合式函数 A，这种情况可能会导致代码出错或难以维护，在设计组合式函数的逻辑时，要规划好依赖关系，确保代码的逻辑清晰。

### （三）与 Vue 版本兼容

要确保 VueUse 的版本与你使用的 Vue 版本兼容，不同的 Vue 版本可能在组合式 API 的实现细节上有一些差异，使用不兼容的版本可能会导致 createSharedComposable 等函数无法正常工作，在项目中使用 VueUse 时，要参考官方文档，选择合适的版本进行安装和使用。

VueUse 的 createSharedComposable 为我们在 Vue 开发中实现跨组件状态共享和逻辑复用提供了便捷的方式，通过理解它的作用、使用场景和正确的使用方法，以及注意相关事项，我们可以更好地利用这个函数提升开发效率，构建出更高效、可维护的 Vue 应用，无论是小型项目还是大型项目，合理运用 createSharedComposable 都能让我们的代码结构更加清晰，逻辑更加简洁。