我如何反应性地管理 vuex 中的状态？

Question

我正在尝试解决我的 vuex 商店中的问题。我在我的商店里写了两个不同的动作。一个动作是反应性的，另一个则不是。但是我需要 loadSlidesEach() 的反应性，所以数据会更新。我找不到错误。

我的店铺：

const store = new Vuex.Store({

  state: {
    loadedSlides: []
  },

  mutations: {
    setSlides(state, slides) {
      state.loadedSlides = slides
    },
    setSlidesPush(state, slide) {
      state.loadedSlides.push(slide)
    }
  },

  getters: {
    loadedSlides(state) {
      return state.loadedSlides
    }
  },

  actions: {
    loadSlides({ commit, getters, state }) {
      firebase.database().ref('/slides/').on('value', snapshot => {
        const slidesArray = []
        const obj = snapshot.val()
        for (const key in obj) {
          slidesArray.push({ ...obj[key], id: key })
        }
        commit('setSlides', slidesArray)
      })
    },
    loadSlidesEach({ commit, getters, state }, id) {
      firebase.database().ref('/slides/' + id).on('value', snapshot => {
        const slide = snapshot.val()
        commit('setSlidesPush', { ...slide })
      })
    }
  }
})

我的组件 1：来自 slides() 的数组是反应式的

export default {
  computed: {
    slides() {
      return this.$store.getters.loadedSlides
    }
  },
  created() {
    this.$store.dispatch('loadSlides')
  }
}

我的组件 2：来自 slides() 的数组不是反应式

export default {
  computed: {
    slides() {
      return this.$store.getters.loadedSlides
    }
  },
  created() {
    const slides = ['1','2','3']
    for (let i = 0; i < slides.length; i++) {
      this.$store.dispatch('loadSlidesEach', slides[i])
    }
  }
}

我认为问题出在初始状态或 push() 的突变上。有什么建议吗？

更新： 这两个动作仅在突变上有所不同。那么在 vuex 中设置状态的最佳方式是什么？如果我在循环中调用操作 loadSlidesEach()，商店会感到困惑。

Answer 1

不要同时使用 await 和 then。使用一个或另一个：

loadSlidesEach: async({ commit, getters }, id) => {
  const data = await firebase.database().ref('/slides/' + id).once('value')
  const slide = data.val()
  commit('setSlidesPush', { ...slide })
}

Answer 2

你尝试使用 vuex 中的 mapState 吗？:

import {mapState} from 'vuex'

export default {
  computed: {
     ...mapState(['loadedSlides '])
  }
}

现在您可以在组件中使用 loadedSlides。

Answer 3

我找到了解决问题的有效方法。

改变突变：

setSlidesPush(state, addedSlide) {
  const slideIndex = state.loadedSlides.findIndex(slide => slide.id === addedSlide.id)
  if (slideIndex !== -1) {
    Vue.set(state.loadedSlides, slideIndex, addedSlide)
  } else {
    state.loadedSlides.push(addedSlide)
  }
}

我如何反应性地管理 vuex 中的状态？

How can I manage state in vuex reactively?

javascript

vue.js

vuex

vuejs2