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

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        addressList: [{
                id: 1,
                username: "小明",
                phone: '15612345678',
                addressDetail: "某某省 某某市 某某區 110"
            },
            {
                id: 2,
                username: "小紅",
                phone: '13812345678',
                addressDetail: "某某省 某某市 某某區 110"
            },
            {
                id: 3,
                username: "小花",
                phone: '18612345678',
                addressDetail: "某某省 某某市 某某區 110"
            }
        ]
    },
    getters: {
        getAddress: (state, getters) => (id) => {
            return state.addressList.find(address => address.id === id)
        }
    },
    mutations: {
        addAddress(state, address) {
            return state.addressList.push(address)
        }
    }
})複製程式碼

<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，對於頁面頭進行簡單設計。
• 最後，在頁面底部新增了一個新增地址按鈕，是為在演示如何在一個頁面實現新增與修改地址功能。

<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的使用。

<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.
  

四、寫在後面

實際我們在做產品時，涉及到使用者體驗的東西很多，比如頁面樣式、預設地址、輸入驗證、驗證提示、地址級聯選擇等等，作為一個功能實現，暫不予考慮。

以上是作為一名喜歡前端技術的產品經理實現該功能的思路及方法，相信大神們會有更簡潔便利的方式。

最後，針對文中有不對的地方，或者可以再優化的點，請多多指教。