由于项目需求,需要在日历边上设置一个月份选择器来对日历进行更改,因为日历部分需要多tab展示,所以就采用了日历与选择器分离的方式来实现(保证选择器对每一个tab中的日历均有赋值)
然后就是使用vuex将日历和选择器绑定到同一个值上,使其数据同步。
这边遇到一个小坑,一开始想法是通过change事件来更改vuex中的绑定值,从而触发数据更新,后来一看calendar组件中没有事件暴露。。。。。想不通为啥(其实后来一想这条路根本过不去,因为绑定的是vuex中的值,所以就算有事件也是会报错的,除非把值深拷贝后进行绑定..)。
最后想着用计算属性碰碰运气,没想到还真的可以,set方法的参数正好可以获取到日历当前点击的时间,直接赋值搞定
computed: {
calendarMouth: {
get() {
return this.$store.state.calendarMouth;
},
set(val) {
this.$store.commit("SET_CALENDAR_TIME", val);
}
}
}
选择器的绑定值同理