Saya mencoba menyelesaikan masalah di toko vuex saya. Saya menulis dua tindakan berbeda di toko saya. Satu tindakan reaktif dan yang lainnya tidak. Tapi saya membutuhkan loadSlidesEach() dalam reaktivitas, sehingga data diperbarui. Saya tidak dapat menemukan kesalahannya.

Toko saya:

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

Komponen saya 1: Array dari slide() bersifat reaktif

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

Komponen saya 2: Array dari slides() tidak reaktif

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

Saya pikir masalahnya adalah sesuatu dengan keadaan awal atau mutasi dengan Push(). Ada saran?

Pembaruan: Kedua tindakan tersebut hanya berbeda dalam mutasi. Jadi apa cara terbaik untuk mengatur status di vuex? Toko menjadi bingung jika saya memanggil aksi loadSlidesEach() dalam satu lingkaran.

0
joungle 22 Desember 2020, 21:31

3 jawaban

Jawaban Terbaik

Saya menemukan solusi yang berfungsi untuk masalah saya.

Ubah mutasi:

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)
  }
}
0
joungle 31 Desember 2020, 13:48

Jangan gunakan await dan then secara bersamaan. Gunakan satu atau yang lain:

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

Apakah Anda mencoba menggunakan mapState dari vuex ?:

import {mapState} from 'vuex'

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

Sekarang Anda dapat menggunakan LoadSlides di komponen.

0
Abdul Rahmat 30 Desember 2020, 09:32