Vue项目的记录（十四）

1. 交易页面的静态组件

弄好静态组件， 添加路由配置信息。

2. 获取交易页数据

接口 + vuex三连环
这里注意：只有用户登陆了才可以获得用户地址信息，不登录没办法获取的到

trade.js的vuex

import {reqAddressInfo, reqOrderInfo} from '@/api'

const actions = {
    // 获取用户地址信息
    async getUserAddress(context) {
            let result = await reqAddressInfo();
            if(result.code == 200) {
                context.commit('GETUSERADDRESS', result.data)
            }
    },
    // 获取商品清单
    async getOrderInfo(context) {
        let result = await reqOrderInfo();
        if(result.code == 200) {
            context.commit('GETORDERINFO', result.data)
        }
    }
}

const mutations = {
    // 获取用户地址信息
    GETUSERADDRESS(state, address) {
        state.address = address
    },
    // 获取商品清单
    GETORDERINFO(state, orderInfo) {
        state.orderInfo = orderInfo
    }
}

const getters = {}

const state = {
    address: [], // 用户地址信息
    orderInfo: {}, //商品清单
}

export default {
    actions,
    mutations,
    getters,
    state
}

挂载之后派发action 即可获得数据

3. 用户地址信息的展示

排他思想 + mapState 获取数据 .find()方法：查找数组中当中符合条件的元素返回，作为最终结果

数据展示

根据排他思想所选择的地址展示，以及find()方法筛选出来的元素

4. 商品清单信息的展示