一、使用 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
点确定:退出登录,并提示退出成功
点取消:控制台输出文字,实际啥也没干,此可不写