Why is the getter called twice?

Question

Vue.js

Reproduce error in sandbox not getting
JSON

{
  "documents": [
    {
      "id": "2175153000",
      "person": "Иванов Иван Иванович",
    },
    {
      "id": "2175153001",
      "person": "Иванов Иван Иванович2",
    }
  ]
}

export const getDocuments = () => {
  return axios.get('../../static/documents.json')
    .then(({
      data
    }) => {
      if (data.errors) throw new Error(data.errors);
      return data;
    })
};

Action

getDocuments({ commit }) {
    getDocuments().then(response => {
        commit('setDocuments', response);
    }).catch(errors => {
        console.error(errors);
    });
},

mutation

setDocuments(state, payload) {
    state.documents = payload.documents;
},

getters

docStatuses(state) {
    console.log(state.documents)
}

Getter for some reason works twice
1) an empty object
2) with data
I can not understand why this behavior?

Answer 1

Initially, your state.docuemnts is declared in the state and is probably empty, and after the mutation it is filled