今天使用了vux的inline-x-switch组件 并使用了vuex的store模型的state,使用到了计算属性的get和set方法,这在项目中还比较少见,所以记录下来
组件绑定了store的state的syncmarket。话为什么要使用store模型,主要我这边有两个页面跳转,不使用store,会导致页面重复请求后台获取
<inline-x-switch v-model="syncmarket" @click.native="toggleSync"></inline-x-switch>
效果如图
line-x-switch 组件绑定了这个页面的计算属性syncmarket
computed: {
syncmarket: {
get() {
return this.$store.state.syncmarket;
},
set(value) {
this.$store.commit('mSyncmarket', value);
}
}
},
为什么还有set 和get ,默认情况下vue的计算属性只有get ,为什么这边还有set,因为组件的v-model,会有一个设置值的操作,如果没有set方法,控制台会报警告,而且自己还要手动去设置store的state值
警告内容:
Computed property "syncmarket" was assigned to but it has no setter.
vue的计算属性的set详见:https://cn.vuejs.org/v2/guide/computed.html
这样操作之后 ,就可以直接使用this.syncmarket,跟直接使用this.$store.state.syncmarket一样。
画外音
inline-x-switch的组件,我为什么使用了绑定click事件,而没有使用@on-change。理论上on-change其实是更好的,因为绑定的syncmarket已经变更了,而click事件触发的时候syncmarket不没变。变通的方法有两个,
1、使用event的event.target.checked来判断是否选中
2、使用setTimeout(()=>{},0)方法,再获取this.syncmarket
话说回来,为什么我没有使用on-change方法呢,主要是这要值一变动,就会向后台请求操作,这样初始化的时候,就会触发请求,所以才使用了click事件,保证属性值的变动,都是用户点击引起的
inline-x-switch的事件处理函数如下, 都是异步请求
updateSyncMarket(event) {
setTimeout(()=>{
//let syncmarket = event.target.checked;
let syncmarket = this.syncmarket;
// 请求业务服务参数设置-商品图片同步在线超市
baseInfoModel.getCompanyInfoInner(({
token,
secid
}) => {
var url = serverURL.updateSyncMarket;
axios
.post(url, {
token: token,
secid: secid,
data: {
syncsupermarket: syncmarket ? "1" : "0"
}
})
.then(({
data
}) => {
console.log(data);
if (data.ret == 0) {
let text = syncmarket ? "开启商品图片同步在线超市" : "关闭商品图片同步在线超市";
//this.$store.commit('mSyncmarket', syncmarket);
Vue.$vux.toast.show({
type: 'text',
text: text,
position: "middle"
});
}
})
.catch(error => {
console.log("调用parameter/on失败");
this.msg = "网络异常,请稍后重试!";
this.isError = true;
});
});
},0)
}