Vue에서 계산된 개체를 변경하는 방법은 무엇입니까?

Vue에서 계산된 개체를 변경하는 방법은 무엇입니까?

월을 간단하게 선택할 수 있습니다.

<select v-model="month" v-on:change="dateChanged('month', month)">
    <option v-for="(month, index) in months" :value="index">{{ month }}</option>
</select>

Vuex에 저장된 기본 날짜 개체:

computed: {
    ...mapGetters(['date']), 
    month() {
        return this.date.format('M') - 1
    },

문제는 내가 몇 달을 바꿀 때month값은 변하지 않습니다...선택 항목의 시각적 월이 변경되었지만 값은 여전히 이전과 동일합니다.

그 이유는computed이름에서 알 수 있듯이 속성은 내부에서만 덮어쓸 수 있으며 데이터 저장소에 쓸 수 없습니다.다음 항목을 채우려는 경우monthVueX 저장 및 쓰기 가능성 유지는 다음의 조합으로 작성하는 것이 가장 좋습니다.

• 망보는 사람date그리고 내부를 업데이트합니다.month저장소가 업데이트될 때마다 데이터
• 간단히 쓰고 읽을 수 있는 내부 데이터month

예는 다음과 같습니다.

// Populate internal store with state data
data: function() {
    return {
        month: this.date.format('M') - 1
    }
},

// Map getter
computed: {
    ...mapGetters(['date'])
},

// Watch changes to mapped getter
watch: {
    date: function(val) {
        this.month = this.date.format('M') - 1
    }
}

물론 DRY 원칙에 따라 논리를 별도의 방법으로 추상화할 수도 있습니다.

methods: {
    getMonth: function(month) {
        return month.format('M') - 1;
    }   
},
data: function() {
    return {
        month: this.getMonth(this.date)
    }
},
computed: {
    ...mapGetters(['date'])
},
watch: {
    date: function(val) {
        this.month = this.getMonth(val)
    }
}

언급URL : https://stackoverflow.com/questions/50207872/how-to-change-computed-object-in-vue