Vue Сообщение об ошибке: не изменять хранилище vuex вне обработчика мутаций

Question

Я просмотрел документы и получил несколько Vue проектов, успешно работающих с Vuex, но эта ошибка сбивает с толку.

состояние. js

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

мутации. js

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

Функция, которая фиксирует внутри моего Vue Компонент:

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

Я также пытался сделать копию массива для манипуляции, но это не помогло.

Ошибки:

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.$store.commit('articles/addArticles', recentArticles);

, поверхностная копия недавних статей сохраняется в Vuex. и теперь, если вы измените элемент RecentArticles в компоненте, он сгенерирует эту ошибку.

, поэтому решение будет состоять в том, чтобы создать глубокую копию недавних статей при фиксации

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

, хотя существует много способов создания Deep Скопируйте, но это самый простой.