Vuex - '변환 핸들러 외부의 vuex 저장소 상태를 변환하지 않음'

Vuex - '변환 핸들러 외부의 vuex 저장소 상태를 변환하지 않음'

파이어스토어에서 Vuex 스토어를 초기화하려고 합니다.코드의 마지막 줄context.commit('SET_ACTIVITIES', acts)에러의 원인이 됩니다.나는 내가 액션을 사용하고 있기 때문에 직접적으로 국가를 변화시키고 있다고 생각하지 않는다.내가 뭘 놓쳤을까?

Vuex 스토어는 다음과 같습니다.

export default new Vuex.Store({
  strict: true,
  state: {
    activities: []
  },
  mutations: {
    SET_ACTIVITIES: (state, activities) => {
      state.activities = activities
    },
  },

  actions: {
    fetchActivities: context => {
      let acts = []
      let ref = db.collection('activities')
      ref.onSnapshot(snapshot => {
        snapshot.docChanges().forEach(change => {
          if(change.type == 'added') {
            acts.push({
              id: change.doc.id,
              name: change.doc.data().name,
              day: change.doc.data().day
            })
          }
        })
      })
      context.commit('SET_ACTIVITIES', acts)
    }
  }

또한, Firestore에 있는 아이템의 수와 동일한 오차를 줍니다.내가 한 가지 약속만 한다면 왜 그렇게 하겠어?

콘솔:

[Vue warn] :watcher "function ( )에 대한 콜백 오류입니다. { 반환됩니다._data.$state}: "오류: [vuex] 변환 핸들러 외부의 vuex 저장소 상태를 변환하지 않습니다."

그리고.

Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:87)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:763)
    at Watcher.run (vue.runtime.esm.js?2b0e:4562)
    at Watcher.update (vue.runtime.esm.js?2b0e:4536)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at Array.mutator (vue.runtime.esm.js?2b0e:882)
    at eval (store.js?c0d6:36)
    at eval (index.cjs.js?e89a:21411)
    at eval (index.cjs.js?e89a:4904)
    at LLRBNode.inorderTraversal (index.cjs.js?e89a:1899)

개체 참조 및 비동기 메서드에 문제가 발생했습니다.

CollectionReference#onSnapshot() 비동기이며, 에서 스냅숏청취자/옵서버를 트리거합니다.QuerySnapshot이벤트입니다.

기본적으로 코드에서 발생하는 것은 빈 어레이를 할당하는 것입니다.acts로.state.activities(같은 오브젝트 참조) 변환 후 나중에 스냅샷 이벤트 핸들러에서 직접 요소를 푸시합니다.

빠른 해결책은 변이를 커밋하는 것입니다.onSnapshot옵서버

fetchActivities: context => {
  let ref = db.collection('activities')
  ref.onSnapshot(snapshot => {
    let acts = []
    snapshot.docChanges().forEach(change => {
      if(change.type == 'added') {
        acts.push({
          id: change.doc.id,
          name: change.doc.data().name,
          day: change.doc.data().day
        })
      }
    })
    context.commit('SET_ACTIVITIES', acts)
  })
}

---

수집 데이터의 초기 가져오기만 수행하려는 경우 대신 을 사용하십시오.약속을 반환하는 경우 이를 사용하여 작업을 구성할 수 있습니다.

async fetchActivities ({ commit }) {
  let snapshot = await db.collection('activities').get()
  let acts = snapshot.docChanges().filter(({ type }) => type === 'added')
      .map(({ doc }) => ({
        id: doc.id,
        name: doc.data().name,
        day: doc.data().day
      }))
  commit('SET_ACTIVITIES', acts)
}

언급URL : https://stackoverflow.com/questions/56013298/vuex-do-not-mutate-vuex-store-state-outside-mutation-handlers