Vue Error Message: Do not mutate vuex store outside of mutation handler

Question

I reviewed the docs and got several Vue Projects smoothly running with Vuex, but this error is confusing.

state.js

return {
     articles: [],
     currentArticle: null,
}

mutations.js

addArticles(state, articles) {
  state.articles.push(...articles);
}

Function that commits inside my Vue Component:

  async created() {
    const recentArticles = [];

    const querySnapshot = await this.$firestore.collection('fl_content').limit(5).get();

    querySnapshot.forEach(doc => {
      recentArticles.push({id: doc.id, ...doc.data()});
    });

    this.$store.commit('articles/addArticles', recentArticles);
  }

I also tried to make a copy of the array to manipulate, but that didn't help.

Errors:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

vue.runtime.esm.js?2b0e:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    (found in <Root>)

Answer 1

This is because, when you do your first commit

this.$store.commit('articles/addArticles', recentArticles);

a shallow copy of recentArticles is saved in Vuex. and now if you change recentArticles in component it will generate this error.

so the solution would be to create Deep copy of recentArticles while committing

this.$store.commit('articles/addArticles', [...recentArticles]);

though there are many ways to create Deep Copy, but this is the simplest one.