如何以反应方式管理 vuex 中的状态？答案

【问题标题】：How can I manage state in vuex reactively?如何以反应方式管理 vuex 中的状态？
【发布时间】：2021-04-01 11:16:43
【问题描述】：

我正在尝试解决我的 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()，商店会感到困惑。

【问题讨论】：

要明确，问题是您希望两个组件都使用来自 vuex 存储的更新数据？
是的，两个组件都应该更新数据。

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

我为我的问题找到了可行的解决方案。

改变突变：

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

【讨论】：

【解决方案2】：

您是否尝试使用mapState 中的vuex ？：

import {mapState} from 'vuex'

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

现在你可以在组件中使用loadedSlides了。

【讨论】：

【解决方案3】：

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

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

【讨论】：

我修好了，但问题仍然存在。