标签: composable

是否可以创建一个使用渲染函数的可组合函数，以便它可以显示某些内容？

例子：

import { h } from 'vue'

export function useErrorHandling() {
  return {
    render() {
        return h('div', { class: 'bar', innerHTML: 'world!' })      
    }
  }
}

<script setup>
import { useErrorHandling } from './mouse.js'

 useErrorHandling()
</script>

<template>
 hello
</template>

与上面的例子的plaground

我正在尝试将一些函数重写为 VUE 可组合项，在我看来，单个“composable.ts”文件只有一个导出函数可用。这是真的吗？或者有没有办法从单个可组合项导出多个函数？

我正在使用线圈库在可组合视图中加载图像，并且我想为我的线圈图像可组合项定义固定高度和宽度，但是线圈图像可组合类中缺少修饰符，以下是我正在使用的代码片段。

AsyncImage(
        model = limit.imgUrl,
        contentDescription = null
    )

如何使宽度和高度固定，而不管图像分辨率如何。

首先看下面的代码

class WellnessViewModel : ViewModel() {

    private val _tasks = getWellnessTasks().toMutableStateList()
    val tasks: List<WellnessTask>
        get() = _tasks

现在，我将任务传递给 composeFunction，并且 _tasks 中的任何更改（添加或删除项目）都会导致 composeFunction 重新组合。但是这个东西究竟是如何工作的，因为我向该函数提供了非状态对象，如下代码所示。

@Composable
fun WellnessScreen(
    modifier: Modifier = Modifier,
    wellnessViewModel: WellnessViewModel = viewModel()
) {
    Column(
        modifier = modifier
    ) {
        StatefulCounter()
        WellnessTasksList(
            list = wellnessViewModel.tasks,
            onCloseTask = {
                wellnessViewModel.remove(it)
            },
            onCheckedTask = { task, checked ->
                wellnessViewModel.changeTaskChecked(task, checked)
            }
        )
    }
}

为什么它有效以及如何工作，对此需要一个简单的解释。

当我使用 CompositionLocal 时，我从父级获取数据并对其进行修改，但我发现它不会触发子级重组。

我已经成功更改了数据，这可以通过以下方式证明：当我在子可组合项中添加额外的状态，然后更改它以触发重组时，我可以获得新数据。

有人可以给我帮助吗？

附加

代码如下

data class GlobalState(var count: Int = 0)

val LocalAppState = compositionLocalOf { GlobalState() }

@Composable
fun App() {
    CompositionLocalProvider(LocalAppState provides GlobalState()) {
        CountPage(globalState = LocalAppState.current)
    }
}

@Composable
fun CountPage(globalState: GlobalState) {
    // use it request recomposition worked
//    val recomposeScope = currentRecomposeScope
    BoxWithConstraints(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .fillMaxSize()
            .clickable {
                globalState.count++
//                recomposeScope.invalidate()

            }) {
        Text("count ${globalState.count}")
    }
}

我发现一个解决方法是使用currentRecomposable强制重组，也许有更好的方法，请告诉我。