用VUE写出地址管理详细教程

在Vue.js中创建一个地址管理应用，我们可以按照以下步骤来进行：

1. **设置项目**:
- 进入项目目录并安装Vuex（状态管理库）：`cd address-manager && npm install vuex`

2. **创建模块**:
- 创建一个名为`store`的文件夹，并在其中创建`address.js`用于存储地址数据。这是一个简单的Vuex store示例：

   // src/store/address.js
   import Vue from 'vue'
   export default new Vuex.Store({
     state: {
       addresses: []
     },
     mutations: {
       ADD_ADDRESS(state, address) {
         state.addresses.push(address)
       },
       REMOVE_ADDRESS(state, index) {
         state.addresses.splice(index, 1)
       }
     },
     actions: {
       addAddress({ commit }, address) {
         commit('ADD_ADDRESS', address)
       },
       removeAddress({ commit }, index) {
         commit('REMOVE_ADDRESS', index)
       }
     }
   })

3. **组件设计**:
- 创建`AddressList.vue`显示所有地址和操作按钮：

   <template>
     <div>
       <ul>
         <li v-for="(address, index) in addresses" :key="index">
           {{ address.name }}
           <button @click="removeAddress(index)">删除</button>
         </li>
       </ul>
       <input type="text" v-model="newAddress" />
       <button @click="addAddress">添加新地址</button>
     </div>
   </template>

   <script>
   import { mapState, mapActions } from 'vuex'

   export default {
     computed: {
       ...mapState(['addresses'])
     },
     methods: {
       ...mapActions(['addAddress', 'removeAddress']),
       addAddress() {
         this.addAddress(this.newAddress);
         this.newAddress = '';
       },
       removeAddress(index) {
         this.removeAddress(index);
      }
     },
     data() {
       return {
         newAddress: ''
       };
     }
   }
   </script>

4. **路由配置**:
- 如果使用Vue Router，添加地址管理页面的路由到`router/index.js`:

   const routes = [
     { path: '/addresses', component: AddressList }
   ];

   //...
   ]

5. **入口文件**:
- 在`src/App.vue`中导入`AddressList`并将其作为路由组件：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import AddressList from './components/AddressList.vue';

export default {
  components: {
    AddressList,
  },
};
</script>

现在你已经构建了一个基本的地址管理应用。你可以通过浏览器访问`/addresses`路径查看和管理地址。