vue实现默认地址功能

实现默认地址功能的方法

在Vue中实现默认地址功能，通常涉及前端展示、数据管理和后端交互。以下是几种常见方法：

数据结构和状态管理

使用Vue的响应式数据管理地址列表和默认地址：

data() {
  return {
    addresses: [
      { id: 1, content: '地址1', isDefault: true },
      { id: 2, content: '地址2', isDefault: false }
    ]
  }
}

设置默认地址的方法

通过方法切换默认地址状态：

methods: {
  setDefault(addressId) {
    this.addresses.forEach(addr => {
      addr.isDefault = addr.id === addressId
    })
  }
}

前端展示和交互

在模板中渲染地址列表并绑定点击事件：

<template>
  <div v-for="address in addresses" :key="address.id">
    <p>{{ address.content }}</p>
    <button 
      @click="setDefault(address.id)"
      :class="{ active: address.isDefault }"
    >
      {{ address.isDefault ? '默认地址' : '设为默认' }}
    </button>
  </div>
</template>

与后端API交互

保存默认地址到后端服务器：

async setDefault(addressId) {
  try {
    await axios.put('/api/address/default', { id: addressId })
    this.addresses.forEach(addr => {
      addr.isDefault = addr.id === addressId
    })
  } catch (error) {
    console.error('设置默认地址失败', error)
  }
}

使用Vuex管理状态

对于复杂应用，可以使用Vuex集中管理地址状态：

// store.js
const store = new Vuex.Store({
  state: {
    addresses: []
  },
  mutations: {
    SET_DEFAULT_ADDRESS(state, addressId) {
      state.addresses.forEach(addr => {
        addr.isDefault = addr.id === addressId
      })
    }
  },
  actions: {
    async setDefaultAddress({ commit }, addressId) {
      await api.setDefaultAddress(addressId)
      commit('SET_DEFAULT_ADDRESS', addressId)
    }
  }
})

样式优化

为默认地址添加视觉区分：

.active {
  background-color: #42b983;
  color: white;
}

这些方法可以根据具体项目需求进行组合和调整，实现完整的默认地址功能。