vue3仿美团项目问题(3)--地址管理

一、问题一

描述：修改地址数据，将其设置为默认地址，它就成为了默认地址，但是之前的默认地址还会存在，原理上应该把之前设置的默认地址给去掉；

解决办法：

vuex中CHANGEADDRESS(编辑地址)的逻辑为

 CHANGEADDRESS(state, value) {
            state.userAddress = state.userAddress.map(item => {
                return item.id === value.id ? value : item
            })
        },

 在vuex中的CHANGEADDRESS中进行一下判断，如果编辑的是默认地址，需要循环遍历将所有的设置为false；

     if (value.isDefault) {

                    item.isDefault = false

                }

 但是随之带来了第二个问题

二、问题二

描述：修改默认地址的时候，会自动的将默认地址按钮给去掉；

解决办法：

在 if  条件判断里面判断一下，当前 数据的id 和 遍历的 id 是否相同，若不相同，则将遍历的 idDefault(默认是否勾选的按钮的属性值) 设置为 false

 CHANGEADDRESS(state, value) {
            state.userAddress = state.userAddress.map(item => {
                // 如果编辑的是默认地址，需要循环遍历将所有的设置为false
               
                if (value.isDefault && item.id != value.id) {
                    item.isDefault = false
                }
                return item.id === value.id ? value : item
            })
        },

三、问题三

描述：添加地址之后，能保存成功，但是将新添加的数据进行编辑的时候，获取不到对应的数据；

解决办法：

给新添加的地址数据加上对应的   id 属性

if (store.state.userAddress.length) {
          content.id =
            Number(
              store.state.userAddress[store.state.userAddress.length - 1].id
            ) + 1;
        } else {
          content.id = 1001;
        }

四、问题四

描述：对默认地址进行编辑，设置为 不是默认地址，保存之后，地址列表就没有默认的地址数据了；

即使是新添加的 地址数据，不设置为默认地址，也没有默认地址；

正常的话，应该有一个默认的地址。

解决办法：

若修改的是默认地址，将其修改为 不是默认的；

就将修改后的地址数据过滤一遍，将 isDeafault 属性值为 false 的数据给过滤出来；

判断如果数组长度不为0，则将第一条数据设置为默认地址；

完整代码：

    CHANGEADDRESS(state, value) {
            state.userAddress = state.userAddress.map(item => {
                // 如果编辑的是默认地址，需要循环遍历将所有的设置为false
                
                if (value.isDefault && item.id != value.id) {
                    item.isDefault = false
                }

                return item.id === value.id ? value : item
            })
            state.userAddress = state.userAddress.filter(item => {

                return value.isDefault == false && item.isDefault == false
            })
            if (state.userAddress.length) {
                state.userAddress[0].isDefault = true
            }           
        },

五、问题五

vue-router.mjs:2629 Uncaught (in promise) TypeError: api.now is not a function

解决办法：

更新一下 vue-devtools就可以了！！！