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)));

vuex 的奇怪 console.log 输出

strange console.log output with vuex

vue.js

vuex