javascript - Vue 3 组合 API 数据不是 react 性的

Question

我有一个简单的应用程序，其中有一个用于添加任务的组件和一个主页，我想在其中显示所有添加的任务。问题是，当我添加一个新任务时，它没有显示在我呈现所有任务的模板中。我想重新使用我的 AddTasks 组件和 useTasks 组合函数来添加任务。但是他们没有出现在主页上。我做错了什么？

这里是要克隆和尝试的 repo:

$ git clone https://github.com/martinszeltins/vue3-reactivity.git
$ cd vue3-reactivity
$ npm install
$ npm run serve

这是我的 App.vue

<template>
    <div v-for="task in tasks">
        {{ task }}
    </div>

    <add-task />
</template>

<script>
    import AddTask from './components/AddTask.vue'
    import useTasks from './composition/useTasks.js'

    export default {
        components: {
            AddTask
        },

        setup() {
            const { tasks } = useTasks()

            return { tasks }
        },
    }
</script>

这是AddTask组件

<template>
    <button @click="addTask">
        Add new task
    </button>
</template>

<script>
    import useTasks from '../composition/useTasks.js'

    export default {
        setup()
        {
            const { add } = useTasks()

            function addTask() {
                add('My new task')
            }

            return { addTask }
        }
    }
</script>

和useTasks组合函数

import { ref } from 'vue'

export default function useTasks() {
    const tasks = ref(['First task'])

    function add(task) {
        alert(`Adding task - ${task}`)
        tasks.value.push(task)
    }

    return { tasks, add }
}

Answer 1

这是因为每次函数运行时你的数组都会被重置。

将它移到函数之外，它应该可以工作:

import { ref } from 'vue';

const tasks = ref(['First task']);

export default function useTasks() {
    function add(task) {
        alert(`Adding task - ${task}`);
        tasks.value.push(task);
    }

    return { tasks, add };
}