Question

我只选择了几个月：

<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值不会发生变化...视觉中的月份选择已更改但值仍然与以前相同。

Answer 1

这是因为顾名思义，computed属性只能在内部覆盖，而且它不是您可以写入的数据存储。如果您想从VueX商店填充month并保留可写性，最好将其写成以下组合：

监视date的{{3}}，并在商店更新时更新内部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)
    }
}

如何在Vue中更改计算对象？

1 个答案: