# App外送平台 Login Logout
### 載入Logout component UI

[Mint UI](https://mint-ui.github.io/#!/zh-cn)
* 下載UI npm install mint-ui -S

* 實現打包
1. 下載[npm install --save-dev babel-plugin-compon](https://github.com/ElementUI/babel-plugin-component)
2. 修改 babel 配置

* mint-ui 组件分类
a.標籤組件
b.非標籤組件
* 使用mint-ui ,註冊全局變數


* Profile.vue 創建登出組件

<!-- v-if 使用者沒有登入button不用出現-->
<section class="profile_my_order border-1px" v-if="userInfo._id">

<!-- 點擊按鈕觸發logout methods-->
    <mt-button class="logout"  type="danger"@click="logout">退出登陆</mt-button>
    
    
   
</section>

<script>
//引入ui
import { MessageBox } from "mint-ui";

export default {
        methods: {
        logout() {
        //引用ui裡面的配置
            MessageBox.confirm("確定登出?").then(
                (action) => {
                    //請求退出
                    this.$store.dispatch("logout");
                },
                (action) => {
                    console.log("點擊了取消");
                }
            );
        },
    },
}
</script>

* actions.js

//引入接口請求函數(api -> index.js)
import { reqLogout } from '../api';

export defaureqLogout
    async logout({ commit }) {
        const result = await reqLogout();
        if (result.data === 0) {
            commit(RESET_USER_INFO)
        }
    }
}

* mutation-types.js

//重製用戶訊息
export const RESET_USER_INFO = 'reset_user_info' ;

* mutation.js

import { RESET_USER_INFO }from './mutation-types';

export default {
 [RESET_USER_INFO](state) {
        state.userInfo = {}
    }
}

###### tags: `Vue` `login` `logout` `mint ui`