如何基于从可组合计算的另一个计算创建一个计算答案

【问题标题】：How to create a computed based on another computed from composable如何基于从可组合计算的另一个计算创建一个计算
【发布时间】：2021-03-26 22:08:30
【问题描述】：

我正在学习组合 API，做一个简单的待办事项应用程序，但随后有多个泳道（待办事项、做事、完成）。

在useTasks.js 可组合中，我创建了“全局”sourceTasks 反应式，稍后会填充从 API 中提取的数据。然后在 tasks 计算属性中减少，如下所示：

// useTasks.js

const sourceTasks = reactive({
    list: []
});

export default function useTasks() {
    const tasks = computed(() => {
        return sourceTasks.list.reduce(divideIntoSwimLanes, [])
    });

    ...

    return {
        tasks,
        loadTasks,
        createTask
    }
}

没什么太复杂的。

然后我得到了这个SwimLane 组件，嗯……使用任务:)

// SwimLane.vue - setup

async setup(props) {
    const { status } = toRefs(props);

    const { tasks, createTask } = useTasks();

    return {
      tasks,
      label,
      createTask
    }
}

// SwimLane.vue - template
<single-task class="m-3" v-for="task in tasks[status]" :title="task.title" :id="task.id"/>

这行得通，但我觉得它不优雅。我更愿意在 SwimLane 的设置中创建一个新的计算，它保存给定 SwimLane 的任务值。把它放在模板中会混淆逻辑。

我希望这会起作用，但它没有，我认为它失去了反应性，但我无法理解为什么：

// SwimLane.vue - alternative setup
const currentContextTasks = computed(() => {
    return tasks.value[status]
});

return {
    currentContextTasks
}

这个问题感觉有点荒谬，但我主要担心的是我误解了一些核心概念，因此这篇文章很长。

【问题讨论】：

标签： vue-composition-api

【解决方案1】：

这就像有史以来最大的错误。没错，这篇文章作为一种与橡皮鸭交谈的形式真的很有帮助。

我忘记做的是使用状态的值。由于是ref，我只好按如下方式使用：

const currentContextTasks = computed(() => {
    return tasks.value[status.value]  // 'status.value' and not just 'status'
});

【讨论】：