# 用户模块概述
几乎每个项目中都会有用户登录的功能,本模板结合小程序等各端登录的场景,实现登录逻辑的深度封装。
# 实现思路
将用户信息和token存储在vuex store中,在/common/store/user中提供state:
token: '',
info: {}, //用户模块的信息
在/common/mixin/index中,声明全局的变量,便于在页面中调用用户信息。
computed: {
// 全局注入用户信息
userInfo(){
return this.$store.state.user.info
},
// 是否登录
isLogin(){
return this.$store.state.user.token
},
},
使用示例:
<view v-if="isLogin">
{{ userInfo.name }}
</view>
<com-button v-else @click="handleLogin">立即登录</com-button>
<script>
export default {
methods: {
handleLogin(){
this.$store.dispatch("user/login")
},
}
}
</script>
← 数据字典