vue/vuex 订单列表中默认地址是怎么改变的
在新增地址这个操作中是会设置是不是默认的地址,属性是isDefault 当我们勾选的时候, isDefault是为true,那么此时是需要把数据库中的isDefault为true 改为false 确保isDefault只有一个true
先判断playload.isDefault是不是true就是判断用户在新增地址的时候是否勾选为默认地址,如果是的话调用异步操作进行数据库的查询,查询的条件是isDefault:true如果返回有值就是有长度那么找到这个条数据的id,再通过这个id进行数据库的更新,更新的是isDefault:false,此时是更新了数据库但是页面还是会显示两个默认,因为没有进行页面的更新,进行页面的更新是需要通过id的 具有更新的数组的迭代方法有forEach map filter
判断 查询(数据库表中的属性和属性值) 更新(id,需要更新的属性和值) 数据库层面的操作 也就是actions异步操作
async myaddresslistbyitem(context, playload) {
if (playload.isDefault) {
let { data: list } = await myaddressModel.query({
isDefault: true
})
console.log(list)
if (list.length) {
let id = list[0].id //找到要更型数据的id
await myaddressModel.updata(id, {
isDefault: false
})
context.commit("changeisDefault", id) //调用同步方法更新页面
}
}
let { data: list } = await myaddressModel.add({ //新增数据库的操作
...playload
})
context.commit("myaddresslistbyitem", list)
}
页面层面的操作 也就是mutations的操作
例如forEach的更新
state.myaddresslist.forEach(item=>{
if(item.id==playload){
item.isDefault=false
}
})
例如map的更新 map也可以做求和与reduce结合的使用商品列表计算price有体现 map也可以怎加一个属性和值比如怎加isDefault这个属性和值
state.myaddresslist = state.myaddresslist.map(item => {
if (item.id == playload) {
item.isDefault = false
}
return item
})
例如filter的更新 filter也可以做删除的使用 也可以做根据是否选中的状态来选数据,计算price有体现
state.myaddresslist=state.myaddresslist.filter(item=>item.id==playload)[0].isDefault=false
例如数组的新增
myaddresslistbyitem(state, playload) {
state.myaddresslist = [...state.myaddresslist, playload]
},
changeisDefault(state, playload) {
state.myaddresslist = state.myaddresslist.map(item => {
if (item.id == playload) {
item.isDefault = false
}
return item
})
}
},