当我选择待办事项列表时，待办事项不会更新

Question

我有两个组件：TodoList和TodoListsList。它们相应地从todos.js和todoLists.js模块中的状态获取数据。当我选择一些待办事项列表，即将其标记为活动时，TodoListsList被更新，但TodoLists没有更新，认为数据已经更新。我就是这样做的。

todoListsState和markAsActive() (todoLists.js)：

import todos from '@/modules/todos.js'

// ... some code ...

const todoListsState = reactive({
    todoLists: [],
    todoListsAreLoading: false,
    removedTodoListId: null,
    editedTodoListId: null,
    editedTodoListName: '',
    baseTodoListsApiUrl: process.env.VUE_APP_BASE_TODO_LISTS_API_URL,
    todoListCreationFormModalId: 'todoListCreationFormModal',
    todoListNameChangeFormModalId: 'todoListNameChangeFormModal'
});

// ... some code ...

function markAsActive(value) {
    let { close } = infoToast();
    if (value) {
        axios.post((todoListsState.baseTodoListsApiUrl + 'mark-as-active'), {
            activatedTodoListId: value
        }).then(function () {
            getTodoLists();
            const { getTodos } = todos();
            getTodos();
        }).catch(function () {
            dangerToast('Failed to mark to-do list as active.');
        }).finally(() => {
            close();
        });
    }
}

todosState和getTodos() (todos.js)：

const todosState = reactive({
    todos: [],
    activeTodoListId: 0,
    removedTodoId: null,
    editedTodoId: null,
    editedTodoText: '',
    todosAreLoading: false,
    baseTodosApiUrl: process.env.VUE_APP_BASE_TODOS_API_URL,
    todoAdditionFormModalId: 'todoAdditionFormModal',
    todoEditFormModalId: 'todoEditFormModal'
});

// ... some code ...

async function getTodos() {
    try {
        todosState.todosAreLoading = true;
        const response = await axios.get(todosState.baseTodosApiUrl);
        todosState.activeTodoListId = response.data[0];
        todosState.todos = response.data[1];
    } catch (e) {
        dangerToast('To-dos loading failed.');
    } finally {
        todosState.todosAreLoading = false;
    }
}

todosState.todos在控制台中的表现如何：

​

todosState.todos安装Todos.vue时：

​

它看起来不像数组松了，它是反应性的。

如果你需要别的东西来理解我的问题，那就随便问吧。帮助感激。

Answer 1

问题解决了！我刚把todosState从

export default function () {}

而且起作用了！终于！This thread帮了我很多忙。