---
# System prepended metadata

title: App外送平台 Login Logout
tags: [Vue, login, mint ui, logout]

---

# 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 配置
![](https://i.imgur.com/Bymw9oI.png)

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

![](https://i.imgur.com/N53Z0Wm.png)

* Profile.vue 創建登出組件
![](https://i.imgur.com/rB3i9C8.png)

```htmlmixed=
<!-- 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 
```htmlmixed=
//引入接口請求函數(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
```htmlmixed=
//重製用戶訊息
export const RESET_USER_INFO = 'reset_user_info' ;

```

* mutation.js 
```htmlmixed=
import { RESET_USER_INFO }from './mutation-types';

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




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