Question

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

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

每当我尝试用这样的方法调用它时，没有任何反应：

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

我猜这是因为计算属性只允许充当getter（以及可选的setter）。我怎么能改变这种行为？

我过度简化了示例，因为我使用cmoputed属性从我的vuex商店获取数据。我不再能操纵它了。

我是否可以通过某种方式使用currentDate商店的值填充本地vuex属性，以便我仍然可以操作它并添加月份等？

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

Answer 1

如果您的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
        }
    }
}

这就是组件如何使用它，而不是实际做“本地”的事情：

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

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

Answer 2

计算属性不是可以调用的方法。如果您想要这样的方法，请将currentDate移动到方法。你也可以从mounted调用它。

Vue.js修改计算属性？

2 个答案: