Vue外卖十二：mint-ui安装+配置+使用、mint-ui退出登录按钮+退出功能+确认弹窗组件、

一、使用 mint-ui

1) 主页:

文档：https://www.w3cschool.cn/mintui/
官方：http://mint-ui.github.io/#!/zh-cn

2) 安装:cnpm install --save mint-ui

3) 实现按需打包

1. 下载

cnpm install --save-dev babel-plugin-component

2. 修改 babel 配置打开文件 .bablerc 加入如下代码

"plugins": ["transform-runtime",
	//从此处开始复制
	["component", [
		{
			"libraryName": "mint-ui",
			"style": true
		}
	]]
	//复制到此处
]

4) mint-ui组件分类

a. 标签组件
b. 非标签组件

5) 使用 mint-ui 的组件 mian.js注册为全局组件

import {Button} from 'mint-ui'
// 注册全局组件
Vue.component(Button.name, Button)

二、退出登录

1）mint-ui组件的使用 profile.vue

由于已在main.js内注册了全局min-ui的 botton，此处可直接使用其组件

在服务中心外的section外加一个

<!-- 服务中心 -->
略过...
</section>

//开始
<!-- 退出登陆模块：min-ui组件的使用 -->
        <section class="profile_my_order border-1px">
          <mt-button type="danger" style="width: 100%" v-if="userInfo._id" @click="logout">退出登陆</mt-button>
        </section>
	//结束
	
      </section>
</template>

效果：http://localhost:8080/#/profile

2）退出登录逻辑代码实现

1）mutation-types.js

export const RESET_USER_INFO = 'reset_user_info' // 重置用户信息

2）mutations.js

import {
  RECEIVE_ADDRESS,
  RECEIVE_CATEGORYS,
  RECEIVE_SHOPS,
  RECEIVE_USER_INFO,
  RESET_USER_INFO, //导入类型
} from './mutation-types.js'

export default{
	...
  [RECEIVE_USER_INFO](state,{userInfo}){state.userInfo=userInfo},
  //把用户登录信息重置为空，实现退出登录
  [RESET_USER_INFO](state){state.userInfo={}},
}

3）action.js

// 控制mutations
import {
  RECEIVE_ADDRESS,
  RECEIVE_CATEGORYS,
  RECEIVE_SHOPS,
  RECEIVE_USER_INFO,
  RESET_USER_INFO, //【1】退出mutaion-types
} from './mutation-types.js'
import {
  reqAddress,
  reqFoodCategorys,
  reqShops,
  reqUserInfo, 
  reqLogout, //【2】退出登录ajax
} from '../api/index.js'

export default{
	...

	//异步获取自session中的用户信息
	async getUserInfo({commit}){
		const result=await reqUserInfo()
		if(result.code===0){
			const userInfo=result.data
			commit(RECEIVE_USER_INFO,{userInfo})
		}
	},
	
	//异步退出请求
	async getLogout({commit}){
		const result=await reqLogout()
		if(result.code===0){
			commit(RESET_USER_INFO)
		} 
	}
	
}

4）附api/index.js

import ajax from './ajax'
// const BASE_URL = 'http://localhost:4000'
const BASE_URL = '/api'
...

// 10、用户登出
export const reqLogout = () => ajax(BASE_URL+'/logout')

5）退出: profile.vue

<script>
import {mapState} from 'vuex'
import TopHeader from '../../components/TopHeader/TopHeader.vue'
import { MessageBox, Toast } from 'mint-ui' //【1】toast(提示组件)，一个一闪而过的提示

export default{
  computed:{
    //读取状态中的userInfo
    ...mapState(['userInfo'])
  },
  methods:{
  //【2】请求退出
    logout(){
      //【3】mint-ui确认弹窗，详细用法可见文档
      MessageBox.confirm('确定要退出登录吗?').then(
        action => {//【4】
          //点确定执行内容(触发退出mutation,以清空状态内保存的userInfo)
          //getLogout来自actions.js
          this.$store.dispatch('getLogout')
          Toast('退出成功') //mint-ui 提示退出成功组件
        },
        action=>{//【5】
          //点取消执行内容(此处为了演示，正常可不写取消操作)
          console.log('您点了取消，那就啥也不干')
        }
      );
    }
  },
	components:{...}
}
</script>

效果：http://localhost:8080/#/profile

点确定：退出登录，并提示退出成功
点取消：控制台输出文字，实际啥也没干，此可不写