# 1-2.Vue外送平台App-異步顯示數據(地址訊息)

### 異步獲取資料方法演示
>App.vue

<script>
// 異步獲取資料(方法二)
import { mapActions} from 'Vuex'
 mounted() {
        // 異步獲取 address(方法一)
        //this.$store.dispatch('reqAddress')
        //(方法二)
        this.getAddress
    },
    //(方法二)映射生成方法
    computed: {
        ...mapActions(['getAddress'])
    },
</script>

>到devtools確認是否獲取數據

#### 綁定要獲取的數據組件
>Msite.vue
當要顯示的templete

    <!--首頁頭部-->
    //已綁定address資料
    <HeaderTop :title="address.name">
    
        <span class="header_search" slot="search">
            <i class="iconfont icon-sousuo"></i>
        </span>
        <span class="header_login" slot="login">
            <span class="header_login_text">登入|註冊</span>
        </span>
    </HeaderTop>
    
<script>
//1.載入
import {mapState} from "Vuex"

computed: {
        //devTool確認有沒有得到資料
        //categorys:這是一維數組(目前是空數組)
        //2.映射
        ...mapState(["address"]),
        }
</script>