내 레코드 구성 요소 외부의 여러 위치에서 레코드를 가져와야하며 Vuex 및 마운트 된 호출을 사용하여 레코드를 가져옵니다.
Vuex
state: {
record: null,
loaded: false,
currentRecordId: null
},
mutations: {
SET_CURRENT_RECORD_ID(state, recordId){
state.currentRecordId = recordId
}
},
actions: {
getRecord(context){
axios.get('api/thought'+this.state.currentRecordId)
.then(response => {
context.commit('SET_RECORD_DATA', response.data.data)
})
.catch(error => {
})
}
},
레코드 구성 요소
mounted() {
this.getRecord()
},
methods: {
getRecord: function(){
this.$store.dispatch('getRecord');
},
}
문제는 때때로 currentRecordId상태가 경로 매개 변수 this.$route.params.hashedId에서 가져와야하고 때로는 SET_CURRENT_RECORD_ID()돌연변이에 의해 설정 될 수 있다는 것 입니다. 그 이유는 다양한 모달 및 기타 구성 요소에서 레코드를 가져와야하기 때문입니다. 예를 들면 :
레코드 구성 요소
<template>
<div v-for="record in records">
<button><span @click="setRecordHashedId(record.id)" class='bg-blue'> <v-icon class="mr-1">launch</v-icon> View/add details</span></button>
</div>
</template>
<script>
export default {
data: function() {
return {
records: null,
}
},
mounted() {
this.getRecords()
},
methods: {
setRecordHashedId(hashedId) {
this.$store.commit('SET_CURRENT_RECORD_ID', hashedId);
this.$router.push({ name: 'record', params: {hashedId: hashedId } })
}
}
}
</script>
그렇다면 Vuex currentRecordId에서 경로 매개 변수 또는 돌연변이에서 오는 것인지 어떻게 확인 합니까?
ID에 대한 작업에서 페이로드 매개 변수를 사용하여 설정되지 않은 경우 상태의 매개 변수로 돌아가는 것은 어떻습니까?
actions: {
getRecord: async ({ commit, state }, recordId) => {
const url = `api/thought${encodeURIComponent(recordId ?? state.currentRecordId)}`
const { data: { data } } = await axios.get(url)
commit('SET_RECORD_DATA', data)
}
}
그런 다음 어느 쪽이든 파견 할 수 있습니다.
this.$store.dispatch("getRecord") // use state.currentRecordId
// or
this.$store.dispatch("getRecord", this.$route.params.hashedId)
환경에서 Null 병합 연산자 ( ??)를 지원하지 않는 경우이 레거시 옵션을 사용해보십시오.
recordId = typeof recordId !== "undefined" ? recordId : state.currentRecordId
const url = `api/thought${encodeURIComponent(recordId)}`
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다