1. 程式人生 > 其它 >vue/vuex 訂單列表中預設地址是怎麼改變的

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
            })
        }
    },