如何根据可组合的另一个计算创建一个计算

Question

我正在学习作文 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
}

这个问题感觉有点可笑，但我主要担心的是我误解了一些核心概念，因此冗长post。

Answer 1

这简直是有史以来最大的失误。没错，post 作为一种与橡皮鸭交谈的方式真的很有帮助。

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

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

如何根据可组合的另一个计算创建一个计算

How to create a computed based on another computed from composable

vue-composition-api