Vue: 계산 대 데이터(), vuex 바인딩에 대해?

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