javascript - Vue.js 修改计算属性？

Question

我正在尝试像这样修改驻留在 vue.js 计算属性中的 moment.js 实例。

computed: {
    currentDate() {
        return moment();
    }
}

每当我尝试用这样的方法调用它时，什么也没有发生:

methods: {
    prevMonth() {
        this.currentDate = moment(this.currentDate).subtract(1, 'months');
    }
}

我猜这是因为计算属性只允许充当 getter(和可选的 setter)。我怎样才能改变这种行为呢？

我过度简化了示例，因为我使用 cmoputed 属性从我的 vuex 存储中获取数据。不过，我无法再操纵它。

有没有什么方法可以用 vuex 存储的值填充本地 currentDate 属性，这样我仍然可以操作它并添加月份等？

虽然我已经为此使用了 mounted 属性，但我只安装了我的组件一次。欢迎任何帮助。

Answer 1

如果你的 currentDate 属性属于你的 Vuex store，你不应该在你的组件中操作它。相反，您应该:1) 在本地将 getter 映射为计算属性，以及 2) 在本地将突变映射为方法。

这是您的 date Vuex 模块的示例:

export default {
    state: {
        currentDate: moment()
    },
    mutations: {
        subtractMonth (state, date) {
            state.currentDate = moment(state.currentDate).subtract(1, 'months');
        }
    },
    getters: {
        getCurrentDate: (state) => {
            return state.currentDate
        }
    }
}

这就是组件如何使用它，而实际上没有“本地”做任何事情:

import { mapGetters, mapMutations } from 'vuex'
export default {
    computed: {
        ...mapGetters({
            currentDate: 'getCurrentDate'
        })
    },
    methods: {
        ...mapMutations({
            prevMonth: 'subtractMonth'
        })
    }
}

您仍然可以像以前一样在组件中绑定(bind) currentDate 并调用 prevMonth，但现在一切都是通过 Vuex 单一状态完成的。