vue+vue-router+vuex地址管理思路

<template>
    <div>
        <app-header headTitle="地址列表"></app-header>
        <ul>
            <li v-for="address in addressList" :key="address.id">
                <router-link :id='address.id' :to="{path:url,query:{id:address.id}}">
                    <div>
                        <div>
                            <span>姓名：{{address.username}}</span>
                        </div>
                        <div>
                            <span>电话：{{address.phone}}</span>
                        </div>
                        <div>
                            <span>地址：{{address.addressDetail}}</span>
                        </div>
                    </div>
                </router-link>
            </li>
        </ul>
        <div>
            <router-link to='/addressEdit'><button>新增地址</button></router-link>
        </div>
    </div>
</template>
<script>
import appHeader from '@/components/appHeader.vue'
import { mapState } from 'vuex'
export default {
    name: "addressList",
    components: {
        appHeader: appHeader,
    },
    data() {
        return {
            url: ""
        }
    },
    computed: {
        ...mapState(["addressList"])
    },
    beforeRouteEnter(to, from, next) {
        if (from.name == 'orderConfirm') {
            next(vm => {
                vm.url = "/orderConfirm"
            })
        } else {
            next(vm => {
                vm.url = "/addressEdit"
            })
        }

    }
}
</script>
<style scoped>
ul li {
    list-style: none;
    text-align: left;
    margin-bottom: 10px;
    padding: 20px;
}

ul li:nth-child(even) {
    background-color: lightgrey;
}

a {
    text-decoration: none;
    color: black;
}

button {
    outline: none;
    border: none;
    width: 100px;
    height: 40px;
    border-radius: 10px;
    background-color: green;
    color: white;
}
</style>复制代码

说明：

• 页面初始化时，地址列表通过vuex辅助函数 mapState 获取state中地址列表数据，并通过 v-for 指令进行列表渲染。
• 该页面进行初始渲染的关键是获取路由导航来源，通过组件内路由导航守卫 beforeRouteEnter 实现，因为无法获取组件实例 this ，因此在 next 方法中进行实例获取。
• 动态绑定 url ，可根据路由导航来源决定导航跳转去向，另外在 url 中动态绑定 query 参数。
• 在跳转过程中，带着 query.id 参数，即在本次Demo中很多‘页面’中均存在 this.$route.query.id 验证。
• 另外，本页中使用了组件 app-header ，对于页面头进行简单设计。
• 最后，在页面底部添加了一个新增地址按钮，是为在演示如何在一个页面实现新增与修改地址功能。

appHeader.vue：头部样式组件，用在了地址列表页面和地址编辑页面。

<template>
    <div class='header'>
        <span>{{headTitle}}</span>
    </div>
</template>
<script>
export default {
    name: "appHeader",
    props: ['headTitle'],
}
</script>
<style>
.header {
    width: 100%;
    height: 60px;
    text-align: center;
    color: white;
    background-color: lightblue;
    font-size: 20px;
    line-height: 60px;
}
</style>复制代码

说明：

• 这个组件没有太多难点，仅仅涉及到 props 的使用。

AddressEdit.vue：地址编辑页面。

<template>
    <div>
        <appHeader :headTitle="addressEdit"></appHeader>
        <div class='name'>
            <span>姓名：</span><input type="text" v-model='username'>
        </div>
        <div class='phone'>
            <span>电话：</span><input type="text" v-model='phone'>
        </div>
        <div class='addressDetail'>
            <span>地址：</span><input type="text" v-model='addressDetail'>
        </div>
        <router-link to='/addressList'><button @click='editAddress'>提交</button></router-link>
    </div>
</template>
<script>
import appHeader from '@/components/appHeader.vue'
import { mapGetters } from 'vuex'
export default {
    name: "addressEdit",
    data() {
        return {
            addressEdit: "",
            username: '',
            phone: '',
            addressDetail: ''
        }
    },
    components: {
        appHeader: appHeader
    },
    computed: {
        useraddress() {
            return this.$store.getters.getAddress(this.$route.query.id)
        }
    },
    methods: {
        editAddress() {
            let length = this.$store.state.addressList.length
            let address = {}
            address.id = length + 1
            address.username = this.username
            address.phone = this.phone
            address.addressDetail = this.addressDetail
            this.$store.commit("addAddress", address)
        }
    },
    created() {
        this.$route.query.id ? this.addressEdit = '编辑地址' : this.addressEdit = '新增地址';
        if (this.$route.query.id) {
            let userAddress = this.$store.getters.getAddress(this.$route.query.id)
            this.username = userAddress.username || '';
            this.phone = userAddress.phone || '';
            this.addressDetail = userAddress.addressDetail || '';
        }

    }

}
</script>
<style>
input {
    border: 1px solid lightblue;
    outline: none;
    width: 300px;
    height: 30px;
    border-radius: 5px;
}

.name {
    margin-top: 10px;
}

.phone {
    margin: 10px 0;
}

button {
    margin-top: 20px;
    outline: none;
    border: none;
    width: 100px;
    height: 40px;
    border-radius: 10px;
    background-color: green;
    color: white;
}
</style>复制代码

说明：

• 头部组件 app-header 中 props 动态赋值，点击新增地址按钮，进入地址编辑页，页面头部展示“新增地址”，点击地址列表中地址，进入地址编辑页，页面头部展示为“编辑地址”。
• 地址修改时，对于输入框内容根据 this.$route.query.id 从vuex中 getters 赋值并展示。
• mutations 方法类似vue中 methods 。
• 信息填写完毕后，通过 mutations 方法向vuex中state中值进行修改。在组件中methods中通过 this.$store.commit("addAddress", address) 提交到mutations。
• 注意 ： 在本次的Demo展示中，我针对地址修改与新增，均向state中地址列表中新增地址，另外，我们不同入口进行地址列表页面时，新增地址提交返回路径地址也应该不一样， 有兴趣的同学们可以尝试修改的方法。 鉴于是个本地展示，本次展示数据修使用的mutations，真正与后台交互中，建议使用 actions .

四、写在后面

实际我们在做产品时，涉及到用户体验的东西很多，比如页面样式、默认地址、输入验证、验证提示、地址级联选择等等，作为一个功能实现，暂不予考虑。

以上是作为一名喜欢前端技术的产品经理实现该功能的思路及方法，相信大神们会有更简洁便利的方式。

最后，针对文中有不对的地方，或者可以再优化的点，请多多指教。