Setelah beberapa bantuan yang baik sudah ada di sini (saya baru dengan Vue dan saya belajar banyak yang keren) saya punya pertanyaan lain. Status komponen saya diperbarui seperti yang diharapkan. Saat memasukkan nilai di bidang pencarian, nilai ini akan dikirim ke API yang akan merespons dan memperbarui status. Masalahnya sekarang adalah saya harus mengklik rute (dan tidak menggunakan refresh/f5) sebelum saya benar-benar dapat melihat komponen yang diperbarui dalam tampilan saya saat ini. Kode saya sejauh ini:

search.vue (jangan pedulikan interpolasi siswa, data dummy)

<div class="mx-auto mt-2 max-w-7xl sm:px-6 lg:px-8">
      <div class="flex justify-between flex-1 max-w-xl px-4">
        <div class="px-4 py-6 sm:px-0">
          <ul id="tutors" class="grid grid-cols-1 gap-6">
            <li
              v-for="tutor in tutors"
              :key="tutor.name"
              class="overflow-hidden bg-white border rounded-lg shadow-md"
            >
              <div class="flex">
                <div class="w-2/3">
                  <img
                    class="flex-shrink-0 object-cover w-full h-64 mx-auto bg-black"
                    :src="student.imageUrl"
                    :alt="student.imageAlt"
                  />
                </div>
                <div class="p-6">
                  <div
                    class="text-xs font-semibold leading-snug tracking-wide text-gray-500 uppercase"
                  >
                    {{ student.subject }} &bull; {{ student.age }} jaar
                  </div>
                  <h4 class="text-lg font-semibold leading-5 tracking-wide">
                    {{ tutor.name }}
                  </h4>
                  <div class="mt-2">
                    {{ student.hourlyRate }}€

                    <span class="text-sm text-gray-600">per uur</span>
                  </div>
                  <div class="mt-2">
                    <span class="font-semibold text-light-blue-800"
                      >{{ student.rating }}/5 sterren</span
                    >
                    <span class="text-sm text-gray-600 truncate">
                      (na {{ student.reviewCount }} reviews)
                    </span>
                  </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>

search.vue JS

<script>
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'Zoeken',
  components: {},

  data: () => ({
    postcode: '',
    attributes: [],
  }),
  computed: {
    ...mapGetters(['isAuthenticated', 'loggedInUser']),
    ...mapState(['tutors']),
  },
  methods: {
    async fetchTutors() {
      const postcode = this.postcode
      await this.$store.dispatch('loadAllTutors', postcode)
    },
  },
  layout: 'app',
  middleware: 'auth',
}
</script>

toko/index.js

export const getters = {
  isAuthenticated(state) {
    return state.auth.loggedIn
  },

  loggedInUser(state) {
    return state.auth.user
  },
}

export const state = () => ({})

export const mutations = {
  SET_TUTORS(state, val) {
    if (val == null || val.update === undefined) {
      state.tutors = val
    } else {
      const update = val.update
      state.tutors = { ...state.tutors, ...update }
    }
  },
}

export const actions = {
  loadAllTutors({ commit }, postcode) {
    this.$axios
      .post('http://notawanker.com/tutors/search', {
        postcode,
      })

      .then(({ data }) => {
        commit(
          'SET_TUTORS',
          data.map((item) => item.attributes)
        )
      })
      .catch((error) => console.log(error))
  },
}

Ini akan menjadi komponen utama aplikasi yang memungkinkan untuk mencari pengguna terdekat. Bagian utama dan API berfungsi tetapi membuatnya reaktif masih menjadi masalah. Saya mencoba beberapa cara berbeda tanpa hasil. Banyak terima kasih sebelumnya.

1
Dennis 20 November 2020, 16:29

1 menjawab

Jawaban Terbaik

Seperti yang saya pahami dalam kode Anda, Anda menggunakan SET_TUTORS untuk mengisi status tutor pada contoh pertama, tetapi Anda juga menggunakannya untuk memperbarui setelah pencarian?

  SET_TUTORS(state, val) {
    if (val == null || val.update === undefined) {
      state.tutors = val
    } else {
      const update = val.update
      state.tutors = { ...state.tutors, ...update }
    }
  },
}

Jika demikian, Anda tidak dapat menggunakan pembaruan yang Anda lakukan tidak reaktif, itu akan diperbarui di toko, tetapi reaktivitas vue tidak akan memicu.

Anda perlu menggunakan Vue.set

 } else {
      const update = val.update
      this.$set(state.tutors, myProperty, myNewValue }
    }

Untuk memperbarui lebih dari satu properti:

 } else {
      const update = val.update

// for replacing the whole object
      this.state.tutors = Object.assign({}, this.state.tutors, update)

// for replacing the a nested object in tutors
      this.state.tutors = Object.assign({}, this.state.tutors.myObjectToUpdate, update)
    }

Beri tahu saya jika berhasil, sementara itu saya dapat menyarankan Anda untuk membaca lebih lanjut tentang reaktivitas di vuejs, ini akan menghemat waktu Anda sesekali :)

https://vuejs.org/v2/guide/reactivity.html#For-Objects

Mengikuti komentar Anda:

Saat Anda memperbarui satu properti dari status, Anda bisa menggunakan this.$set(), saat Anda ingin memperbarui lebih banyak properti sekaligus, Anda perlu menggunakan object.assign

Contoh:

tutors: {
 types: {
  women: 32
 } 
}
And you just want to add the men property number, you will do => this.$set(state.tutors.types, men, 32)

Respons di atas menangani reaktivitas, dan myProperty adalah nama objek properti yang ingin Anda tambahkan

Berdasarkan pertanyaan Anda, karena SET_TUTORS adalah beberapa penggunaan, saya akan menulis kode dengan cara ini untuk memperbarui ketika perlu diperbarui, dan jika itu adalah SET dasar, itu akan menimpa semua yang sudah ada dalam keadaan:

 SET_TUTORS(state, val) {
    if (val == null || val.update === undefined) {
      state.tutors = Object.assign({}, val)
    } else {
      // will create a new object based on your current state and the updated values
      state.tutors = Object.assign({}, this.state.tutors, update)
    }
  },

Semoga membantu

1
DarioRega 20 November 2020, 18:03