当前位置：首页 > VUE

vue实现默认地址功能

2026-02-22 17:04:50VUE

实现默认地址功能的步骤

在Vue中实现默认地址功能，通常涉及前端界面交互、状态管理以及与后端API的通信。以下是具体实现方法：

数据结构设计

地址数据通常包含以下字段：

address: {
  id: Number,
  name: String,
  phone: String,
  address: String,
  isDefault: Boolean
}

前端界面实现

创建地址选择组件，展示地址列表并提供默认地址切换功能：

vue实现默认地址功能

<template>
  <div v-for="item in addressList" :key="item.id">
    <input 
      type="radio" 
      v-model="defaultAddress" 
      :value="item.id"
      @change="setDefaultAddress(item.id)"
    >
    {{ item.address }}
  </div>
</template>

状态管理

使用Vuex或Pinia管理地址状态：

const addressStore = defineStore('address', {
  state: () => ({
    addressList: [],
    defaultAddressId: null
  }),
  actions: {
    async setDefaultAddress(id) {
      await api.setDefaultAddress(id)
      this.defaultAddressId = id
    }
  }
})

API交互

创建与后端交互的方法：

vue实现默认地址功能

const addressApi = {
  getAddressList() {
    return axios.get('/api/address')
  },
  setDefaultAddress(id) {
    return axios.put(`/api/address/${id}/default`)
  }
}

默认地址标识

在地址列表中突出显示默认地址：

<template>
  <div 
    v-for="item in addressList" 
    :key="item.id"
    :class="{ 'default-address': item.isDefault }"
  >
    {{ item.address }}
    <span v-if="item.isDefault">(默认地址)</span>
  </div>
</template>

<style>
.default-address {
  border: 2px solid #42b983;
}
</style>

初始化加载

在组件挂载时加载地址数据：

import { onMounted, ref } from 'vue'

const addressList = ref([])
const defaultAddress = ref(null)

onMounted(async () => {
  const res = await addressApi.getAddressList()
  addressList.value = res.data
  defaultAddress.value = res.data.find(item => item.isDefault)?.id
})

表单验证

添加新地址时验证必填字段：

const rules = {
  name: [{ required: true, message: '请输入收货人姓名' }],
  phone: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
  ],
  address: [{ required: true, message: '请输入详细地址' }]
}

以上方法涵盖了Vue实现默认地址功能的主要方面，包括数据管理、界面展示、状态变更和API交互。根据实际项目需求，可以对这些方法进行调整和扩展。