strange console.log output with vuex

Question

i have some simple vuex store with

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
    }
}

why does console.log in fetchTodos action output populated todos before it was populated with axios.get and setTodos mutation?

when i write

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

output is normal with empty todos in state

Answer 1

That's because you will see a little blue triangle right next to the console log. I don't know the technical term for it but what happens is that the browser will update that variable with the current value because it is a reactive variable and since it is a reference being pointed to a location in memory, it will update.

If you truly wish to see the value and prove what was described above, you can write:

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