不解:
为什么在关闭开关后,已经将data里的属性和vuex属性初始化后,页面就是不响应???
问题:
由于切换路由后,获取到vuex的数据在created中赋值到data相对应的属性中,在关闭开关后请求接口将vuex和data里的属性全部初始化,数据变更成功页面不渲染。(接口只做请求,不做数据返回,由前端实现界面选择回显)
处理:computed + watch 在当前的页面中监听vuex中的数据变化,重新赋值给data里的属性,使页面渲染回初始化。
技术:vue,vuex
页面元素:
1个开关switch,10个多选框数据
操作步骤:
1 进入页面
2 全选数据后打开开关,请求接口
3 切换路由后将数据保存至vuex,当路由切换会当前页时从vuex取出数据实现页面的回显
4 关闭开关,请求接口
代码:
开关对应代码
<el-switch v-model="fruitswitch" class="switchStyle" active-text="Yes" inactive-text="NO" :active-value="1" :inactive-value="0" @change="handleDebug" /> handleDebug(newV) { if (newV) { if (this.checkFruits.length === 0) { this.fruitswitch= 0; this.$message('请选择水果!'); } else { this.$store.dispatch('fruits/save_fruits', newV); !store.getters.fruits_switch && this.FruitsOpenSubmit(); // 加入定时器代码 this.timerSet(1); } } else { this.FruitsSubmitClosed(); } },
开关关闭:
FruitsSubmitClosed() {
// 关
submitInfo(this.submit_info)
.then(res => {
this.$store.dispatch('fruits/save_fruits', 0);
this.checkFruits = [];
this.checkAll = false;
this.isIndeterminate = false;
this.debugInfoSwitch = 0;
this.$message.success(res.msg);
})
.catch(() => {
this.$message.error('失败!');
this.fruitswitch= 0; });
}