Vuex-'请勿在变异处理程序之外变异vuex存储状态' [英] Vuex - 'do not mutate vuex store state outside mutation handlers'

问题描述

我正在尝试从Firestore初始化我的Vuex存储.代码的最后一行 context.commit('SET_ACTIVITIES'，act)是造成错误的原因.我不认为我使用动作是在直接改变状态.我可能会缺少什么?

I'm trying to initialize my Vuex store from Firestore. The last line of code context.commit('SET_ACTIVITIES', acts) is what creates the error. I don't think I'm mutating the state directly since I'm using an action. What could I be missing?

这是我的Vuex商店:

Here's my Vuex store:

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中的项目数.如果我只做一次提交，为什么要这样做呢?

Also, it gives me the error equal to the number of items in Firestore. Why would it do that if I'm only doing one commit?

控制台:

[Vue警告]:监视程序的回调发生错误"function(){return this._data.$$ state}":错误:[vuex]不会在变异处理程序之外变异vuex存储状态."

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

和

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)

推荐答案

您遇到了对象引用和异步方法的问题.

You're running into an issue with object references and asynchronous methods.

CollectionReference#onSnapshot() 是异步的，会在 QuerySnapshot 事件上触发快照侦听器/观察器.

CollectionReference#onSnapshot() is asynchronous, triggering the snapshot listener / observer on QuerySnapshot events.

基本上，代码中发生的事情是，在突变中将空数组 acts 分配给 state.activities (相同的对象引用)，然后在以后的时间在您的 snapshot 事件处理程序中，直接将元素推入其中.

Basically what happens in your code is that you assign the empty array acts to state.activities (same object reference) in your mutation and then, at a later time in your snapshot event handler, directly push elements into it.

一种快速的解决方案是在 onSnapshot 观察者

A quick solution would be to commit the mutation within the onSnapshot observer

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

---

如果您只想对集合数据进行初始获取，请使用 CollectionReference#get() 代替.鉴于它返回了承诺，您可以使用它来使您的操作可组合

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

这篇关于Vuex-'请勿在变异处理程序之外变异vuex存储状态'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！