vue/vuex 訂單列表中預設地址是怎麼改變的
阿新 • • 發佈:2021-08-27
在新增地址這個操作中是會設定是不是預設的地址,屬性是isDefault 當我們勾選的時候, isDefault是為true,那麼此時是需要把資料庫中的isDefault為true 改為false 確保isDefault只有一個true
先判斷playload.isDefault是不是true就是判斷使用者在新增地址的時候是否勾選為預設地址,如果是的話呼叫非同步操作進行資料庫的查詢,查詢的條件是isDefault:true如果返回有值就是有長度那麼找到這個條資料的id,再通過這個id進行資料庫的更新,更新的是isDefault:false,此時是更新了資料庫但是頁面還是會顯示兩個預設,因為沒有進行頁面的更新,進行頁面的更新是需要通過id的 具有更新的陣列的迭代方法有forEach map filterasync 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
})
}
},