인스턴스에서 정의되지 않았지만 I Vuex 렌더링 중에 참조되는 속성 또는 메서드
다음과 같은 에러가 발생.
[Vue warn] :속성 또는 메서드 "updateData"는 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.데이터 옵션에서 비활성 데이터 속성을 선언하십시오.
코드로 알 수 있는 바로는 방법이 있기 때문에 Vuex에 대한 무지함 때문에 놓치고 있는 것이 있습니다.나는 그 문제를 검색해서 꽤 많은 답을 얻었지만, 그 중 어느 것도 내가 어떻게 해야 할지 더 현명하게 해주지 못했다.뭔가 범위가 있는 것 같아요, 제 생각엔요.
아래의 에러도 표시되지만, 양쪽의 근본 원인은 동일하기 때문에 한쪽을 해결하면 다른 한쪽이 해결됩니다.
[Vue warn] :이벤트 "click"에 대한 잘못된 처리기: 정의되지 않았습니다(구성 요소에서...)
가격은 다음과 같습니다.경로가 올바른 위치로 가는 것을 확인했습니다.지금으로서는 어떻게 트러블 슈팅을 시작해야 할지 전혀 모르겠습니다.어떤 힌트라도 주시면 감사하겠습니다.
<template>
<div id="nav-bar">
<ul>
<li @click="updateData">Update</li>
<li @click="resetData">Reset</li>
</ul>
</div>
</template>
<script>
import { updateData, resetData } from "../vuex_app/actions";
export default {
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData, resetData }
}
}
</script>
편집
입력 후 메서드 속성을 포함하도록 내보내기를 개선했습니다(단, 여전히 동일한 오류가 남아 있습니다).
export default {
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData, resetData },
methods:{
updateData: () => this.$store.dispatch("updateData"),
resetData: () => this.$store.dispatch("resetData")
}
}
}
가게에서 다른 일을 해야 하나요?이렇게 생겼어요.
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = { dataRows: [], activeDataRow: {} };
const mutations = {
UPDATE_DATA(state, data) { state.dataRows = data; state.activeDataRow = {}; },
RESET_DATA(state) { state.dataRows = []; state.activeDataRow = {}; }
};
export default new Vuex.Store({ state, mutations });
가져온 기능은 다음과 같이 Vue 구성 요소 메서드로 추가해야 합니다.도움을 받을 수 있습니다.mapActions
설명서에 기재되어 있습니다.이것은 매핑하기 위해 필요합니다.this.updateDate
로.this.$store.dispatch('updateDate')
.
<script>
import { updateData, resetData } from "../vuex_app/actions";
import { mapActions } from 'vuex'
export default {
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData, resetData }
},
methods: {
...mapActions(['updateData', 'resetData'])
}
}
</script>
편집필
사용하고 싶지 않은 경우mapActions
, 를 사용할 수 있습니다.this.$store.dispatch
이 예에서 사용하고 있는 것처럼 다음과 같이 vuex를 삽입하지 않고 vue component 수준(정보)에서 메서드를 사용해야 합니다.
export default {
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData, resetData }
},
methods:{
updateData: () => this.$store.dispatch("updateData"),
resetData: () => this.$store.dispatch("resetData")
}
}
언급URL : https://stackoverflow.com/questions/40877970/property-or-method-not-defined-on-the-instance-but-referenced-during-render-i-vu
'programing' 카테고리의 다른 글
dex를 실행할 수 없음: Eclipse에서 GC 오버헤드 제한을 초과했습니다. (0) | 2022.08.01 |
---|---|
몇 가지 수준의 조언을 얻을 수 있습니까? (0) | 2022.08.01 |
하위 구성 요소에 대해 Vue Propos가 작동하지 않습니다. (0) | 2022.08.01 |
C에서 비트필드를 사용하는 경우 (0) | 2022.08.01 |
도표의 막대 간 간격 감소 (0) | 2022.08.01 |