Vue.js修改计算属性?
作者:互联网
我正在尝试修改驻留在vue.js计算属性中的moment.js实例,如下所示.
computed: {
currentDate() {
return moment();
}
}
每当我尝试使用这种方法调用它时,都不会发生任何事情:
methods: {
prevMonth() {
this.currentDate = moment(this.currentDate).subtract(1, 'months');
}
}
我猜这是因为计算属性仅允许充当getter(以及可选的setter).但是,如何更改此行为?
由于我使用cmoputed属性从vuex存储中获取数据,因此我简化了示例.我不再能够操纵它.
有什么方法可以用vuex存储的值填充本地currentDate属性,以便我仍然可以操纵它并添加月份等.
我虽然为此使用了mount属性,但是我只将组件安装一次.欢迎任何帮助.
解决方法:
如果您的currentDate属性属于Vuex存储,则不应在组件内部对其进行操作.您应该改为:1)将getter本地映射为计算属性,以及2)将突变本地映射为方法.
这是日期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单状态完成.
标签:vuex,vue-js,vue-component,vuejs2,javascript 来源: https://codeday.me/bug/20191111/2019525.html