首先介绍一下为啥要重写计算属性:公司项目的模板中的布局文件是用vue jsx写的,一般不需要更改,但是我有一个需求,在主页的header给到一个入口,打开弹窗,做一份配置的展示和导入导出。
mgtoolbar组件留了插槽
使用icon组件,这儿有个坑(在jsx里面使用其他UI框架的icon组件,很有可能不支持onClick事件,所以此处用nativeClick),
引入dialog组件注册使用(不会用vue jsx 在render函数中进行组件传值,所以控制弹窗显隐的值存到了vuex里面),点击icon的时候调用mutations的setShowConfigInfo方法将isShowConfigInfo改为true
封装的弹窗组件,传给visible的值是一个中间变量isShow,在computed中维护,需要取isShow的值的时候,调用getter,返回vuex中维护的isShowConfigInfo
scope为系统中当前state的模块名,如果state有分模块,那么vuex中维护的变量和方法都需要指定正确的模块才能拿到。
当弹窗关闭时更改isShow的值,会调用isShow的setter函数,调用state的setShowConfigInfo方法,更新isShowConfigInfo为false。
重写计算属性是因为,计算属性一般只有getter函数,你可以取isShow的值到处用,但是在没有setter函数的情况下取修改isShow,是会报错提示:计算属性没有setter函数支持,不能直接修改计算属性的值(大概是这个意思)。