Как изменить вычисляемый объект в Vue? - PullRequest
Новая
       8

Как изменить вычисляемый объект в Vue?

0 голосов
/ 07 мая 2018

У меня есть простой выбор месяцев: 

<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 не меняется ... Визуально месяц в выбранном элементе изменяется, но значение остается таким же, как и раньше.

1 Ответ

0 голосов
/ 07 мая 2018

Это потому, что свойство computed, как следует из названия, может быть перезаписано только внутренне, и это не хранилище данных, в которое вы можете записывать. Если вы хотите заполнить свой month из хранилища VueX и сохранить возможность записи, лучше всего его написать в виде комбинации:

  • a watcher , который наблюдает за 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
    }
}

Конечно, следуя принципу СУХОЙ, вы можете абстрагировать логику в отдельный метод: 

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)
    }
}
...