首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vue.js修改计算属性?

Vue.js修改计算属性?
EN

Stack Overflow用户
提问于 2017-05-09 10:28:55
回答 2查看 10.5K关注 0票数 5

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

代码语言:javascript
运行
复制
computed: {
    currentDate() {
        return moment();
    }
}

每当我尝试用这种方法调用它时,都不会发生任何事情:

代码语言:javascript
运行
复制
methods: {
    prevMonth() {
        this.currentDate = moment(this.currentDate).subtract(1, 'months');
    }
}

我猜这是因为计算属性只允许充当getter(和可选的setter)。但是,我如何改变这种行为呢?

我过度简化了这个示例,因为我使用cmoputed属性从我的vuex存储中获取数据。不过,我已经不能再操纵它了。

有什么方法可以用currentDate商店的值填充本地vuex属性,这样我仍然可以操作它并添加月份等等吗?

我曾经想过要为此使用mounted属性,但我只挂载了一次组件。欢迎任何帮助。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-05-09 13:45:18

如果您的currentDate属性属于您的Vuex存储,则不应该在组件中操作它。相反,您应该: 1)将getter映射为计算属性,2)将变异映射为方法。

下面是您的date Vuex模块的一个示例:

代码语言:javascript
运行
复制
export default {
    state: {
        currentDate: moment()
    },
    mutations: {
        subtractMonth (state, date) {
            state.currentDate = moment(state.currentDate).subtract(1, 'months');
        }
    },
    getters: {
        getCurrentDate: (state) => {
            return state.currentDate
        }
    }
}

这就是组件如何利用它,而不实际“在本地”执行任何操作:

代码语言:javascript
运行
复制
import { mapGetters, mapMutations } from 'vuex'
export default {
    computed: {
        ...mapGetters({
            currentDate: 'getCurrentDate'
        })
    },
    methods: {
        ...mapMutations({
            prevMonth: 'subtractMonth'
        })
    }
}

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

票数 3
EN

Stack Overflow用户

发布于 2017-05-09 10:49:50

计算的属性不是您可以调用的方法。如果您想拥有这样的方法,请将currentDate移到方法中。您还可以从mounted调用它。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43867369

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档