Nuxt 구성 요소가 업데이트되지 않지만 저장소가 예상대로 업데이트되고 있습니다.

Nuxt 구성 요소가 업데이트되지 않지만 저장소가 예상대로 업데이트되고 있습니다.

이미 좋은 도움을 받은 후(Vue가 처음이라 많은 것을 배우고 있습니다) 또 다른 질문이 있습니다.컴포넌트 상태가 정상적으로 갱신되고 있습니다.검색 필드에 값을 입력하면 이 값이 API로 전송되고 API가 응답하여 상태를 업데이트합니다.문제는 현재 뷰에서 갱신된 컴포넌트를 실제로 표시하기 전에 루트를 클릭(새로고침/f5를 사용하지 않음)해야 한다는 것입니다.지금까지의 코드:

search.vue(학생 보간, 더미 데이터 상관 없음)

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

store/index.displaces

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

이것은 앱의 주요 컴포넌트로, 가까운 사용자를 검색할 수 있게 됩니다.메인 부분과 API는 동작하고 있지만 반응시키는 것은 여전히 문제가 있습니다.나는 몇 가지 다른 방법을 시도했지만 성공하지 못했다.미리 감사 드려요.

당신의 코드에서 이해한 바와 같이, 당신은 SET_TUTTUTRS를 사용하여 튜터 상태를 처음에 채우고 있지만, 검색 후 업데이트에도 그것을 사용하고 있습니까?

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

이 경우 현재 진행 중인 업데이트를 사용할 수 없으며, 업데이트가 저장소에서 업데이트되지만 vue 반응성이 트리거되지 않습니다.

Vue를 사용해야 합니다.세트

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

여러 속성을 업데이트하는 경우:

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

효과가 있으면 알려 주십시오.그동안 vuejs의 반응성에 대해 자세히 읽어보시면 시간을 절약할 수 있습니다.

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

코멘트에 이어서:

주에서 단일 속성을 업데이트할 때 다음과 같이 할 수 있습니다.$set420 한 번에 더 많은 속성을 업데이트하려면 object를 사용해야 합니다.

예제:

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

위의 응답 핸들 반응성과 myProperty는 추가할 속성 객체의 이름입니다.

질문하신 내용에 따라 SET_TOTUTRS는 여러 가지 용도이므로 업데이트해야 할 때 코드를 작성하고 SET이 기본일 경우 해당 상태의 모든 것을 덮어씁니다.

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

도움이 되었으면 좋겠다

언급URL : https://stackoverflow.com/questions/64930312/nuxt-component-not-updating-but-store-is-updating-as-expected