반응형
Vue: 계산 대 데이터(), vuex 바인딩에 대해?
(주의: 사용 방법에 대해서는 묻지 않습니다.watch
).
이 양식 템플릿이 있으며 예를 들어 일부 변수에 바인딩하려고 합니다.objectvalue3
는 Vuex 스토어에서 추적됩니다(주의: 한 페이지에 다른 형식이 표시될 수 있습니다.props.formname
참조할 폼을 지정합니다).
<template>
<div>
Tracking formname_:{{formname_}}:
<form method="post" autocomplete="off">
<input type="text" name="objectvalue3" :value="objectvalue3" />
<input type="submit" class="btn btn-primary btn-success" value="Track" @click.prevent="write">
</form>
</div>
</template>
....
props: {
formname: {
type: String,
default: "main"
}
},
추적 중data
는 동작하지 않습니다.즉, 폼이 갱신되지 않습니다.vuex가 초기화된 값만 유지됩니다.
data: function() {
return {
formname_: this.formname
,objectvalue3: this.$store.state.tracker[this.formname].objectvalue3
},
단, 을 사용하여computed
작동하다.
computed: {
objectvalue3: function() {
return this.$store.state.tracker[this.formname].objectvalue3
}
나도 알아computed
내가 계산을 해야 할 때.하지만 여기에는 실제 계산이 진행되지 않는다.단, 해시 룩업일 수 있습니다.this.formname
어떤 형태인지 알 수 있습니다.tracker
스트레이트의 원인이 되고 있는 것을 볼 것data
실패할까?vuex에만 해당됩니까?
대신 다음을 시도해 보십시오.
data: function() {
return {
formname_: this.formname,
tracker: this.$store.state.tracker[this.formname]
},
그 후, 다음과 같이 입력합니다.
<input type="text" name="objectvalue3" :value="tracker.objectvalue3" />
이 방법은 데이터 전송이 가능하기 때문에tracker
오브젝트는 스토어 내의 오브젝트를 가리키고 있습니다.그 값이 변경될 때마다 이 오브젝트도 변경됩니다.tracker
물건.
computed
는 그 안에서 사용되는 변수의 변경을 리슨하기 때문에 동작하지만, 데이터는 실행 시 첫 번째 값을 적용하고 변경을 추적하지 않기 때문에 동작하지 않습니다.
언급URL : https://stackoverflow.com/questions/50239661/vue-computed-vs-data-for-vuex-bindings
반응형
'programing' 카테고리의 다른 글
Java OCR 구현 (0) | 2022.07.16 |
---|---|
Java String interning이란 무엇입니까? (0) | 2022.07.09 |
Vue.js - 어레이 오브젝트에 계산 속성을 구현하는 방법 (0) | 2022.07.09 |
sprintf()는 자동 메모리 할당 기능을 갖추고 있습니까? (0) | 2022.07.09 |
상태, 커밋, 디스패치 및 게터에 의존하는 Vuex 액션을 테스트(모카)하려면 어떻게 해야 합니까? (0) | 2022.07.09 |