如何在 vuex 中响应式管理 state？

Question

I am trying to solve a problem in my vuex store. I write two different actions in my store. One action is reactive and the other not. But I need the loadSlidesEach() in reactivity, so the data are updated. I cant find the mistake.

My store:

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

My component 1: Array from slides() is reactive

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

My component 2: Array from slides() is not reactive

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

I think the problem is something with the inital state or the mutation with push(). Any advices?

Update: The two actions are only different in the mutations. So what is the best way to set the state in vuex? The store get confused if I call the action loadSlidesEach() in a loop.

Answer 1

Don't use await and then together. Use one or another:

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

Answer 2

do you try to use mapState from vuex ?:

import {mapState} from 'vuex'

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

now you can use loadedSlides in component.

Answer 3

I found a working solution for my problem.

Change the mutation:

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