vuex的奇怪console.log输出

Question

我有一些简单的vuex商店

const state = {
    todos : []
}

const getters = {
    allTodos: (state) => state.todos
}

const actions = {
     async fetchTodos({ commit }) {
        console.log(this.state.todos)
        if(state.todos.length == 0) {
                const response = await axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
                commit('setTodos', response.data)
        }         
    }
}

const mutations = {
    setTodos(state, todos) {
        state.todos = todos
    }
}

为什么fetchTodos操作输出中的console.log在填充axios.get和setTodos突变之前填充了待办事项？

当我写的时候

const actions = {
     fetchTodos({ commit }) {
        console.log(this.state.todos)
        setTimeout(async () => {
            if(state.todos.length == 0) {
                const response = await axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
                commit('setTodos', response.data)
            }
        }, 10000)    
    }
}

输出正常，状态为空的待办事项

Answer 1

这是因为您将在控制台日志旁边看到一个蓝色小三角形。我不知道它的技术术语，但发生的是浏览器将使用当前值更新该变量，因为它是一个反应性变量，并且由于它是指向内存中某个位置的引用，因此它将更新。

如果你真的希望看到它的价值并证明上面描述的，你可以这样写：

console.log(JSON.parse(JSON.stringify(this.state.todos)));