Vue.js 修改计算 属性?

Question

我正在尝试像这样修改驻留在 vue.js computed 属性 中的 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 移至方法。您也可以从 mounted.

调用它

Answer 2

如果你的 currentDate 属性 属于你的 Vuex 商店，你不应该在你的组件中操纵它。您应该改为：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
        }
    }
}

这就是组件如何使用它，实际上没有做任何事情 "locally":

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

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