uniapp 学习笔记二十用户登录信息存储和跨组件使用

Dear 丶 2024-04-07 10:22 90阅读 0赞

uniapp 学习笔记二十 用户登录信息存储和跨组件使用

![baaf6d04a1524d3ebe80703ba6e34cc0.png][]

![884a3afdc97d43778f90481852fda313.png][]

app.vue

index.js

import Vue from "vue"
    import Vuex from "vuex"
    import count from './count.js'
    import condition from './condition.js'
    import user from './user.js'
    Vue.use(Vuex)
    const store = new Vuex.Store({
        // 定义状态对象
        // state:{
        //     num:100
        // }
        modules:{
            count,
            condition,
            user
        }
    })
    export default store

user.js

import {$post} from '../utils/request.js'
    export default {
        namespaced:true, //开启命名空间后,访问所有属性都需要带模块名
        state(){
            return {
                userInfo:null
            }
        },
        mutations:{
            initInfo(state,info){
                // 存入状态机变量
                state.userInfo = info
            }
        },
        actions:{
            userLoginAct(context,info){
                $post('/1.1/login',info).then(res=>{
                    console.log(res)
                    let {code} = res
                    if (code) {
                        let title = code == 211 ? '账号不存在' : '密码错误'
                        uni.showToast({
                            title,
                            icon:'none'
                        })
                        return
                    }
                    context.commit('initInfo',res)
                    // 存入本地存储
                    uni.setStorage({
                        key:'userInfo',
                        data:info
                    })
                    // 返回上一页
                    uni.navigateBack({
                        delta:1
                    })
                })
            }
        }
    }

<template>
    	<view class="content">
    		<view class="logo"><image src="../../static/kitty-BasicLogin/logo.png" mode=""></image></view>
    		<view class="uni-form-item uni-column">
    			
    			<input v-model="info.username" type="text" class="uni-input" name="" placeholder="请输入用户名" />
    		</view>
    		<view class="uni-form-item uni-column">
    			<input v-model="info.password" type="password" class="uni-input" name="" placeholder="请输入密码" />
    		</view>
    		<button type="primary" @tap="handleLogin">登陆</button>
    		<view class="links"><view @tap="gotoForgetPassword">忘记密码？</view><view>|</view><view class="link-highlight" @tap="gotoRegistration">注册账号</view></view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				info:{
    				    username:'曹国舅',
    				    password:'123'
    				}
    			}
    		},
    		onLoad() {
    			
    		},
    		methods: {
    			gotoRegistration: function () {
    				uni.navigateTo({url: 'registration'});
    			},
    			gotoForgetPassword: function () {
    				uni.navigateTo({url: 'forget-password'});
    			},
                handleLogin(){
                    /* 
                    //方法一
                    this.$post('/1.1/login',this.info).then(res=>{
                        console.log(res)
                    }) */
                    // 方法二 通过状态机
                    this.$store.dispatch('user/userLoginAct',this.info)
                }
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	$color-primary: #b49950;
    	.content{
    		padding: 100upx;
    	}
    	.logo{
    	    text-align: center;
    		image{
    		    height: 200upx;
    		    width: 200upx;
    		    margin: 0 0 60upx;
    		}
    	}
    	.uni-form-item{
    		margin-bottom: 40upx;
    		padding: 0;
    		border-bottom: 1px solid #e3e3e3;
    		.uni-input{
    			font-size: 30upx;
    			padding: 7px 0;
                height: 70upx;
    		}
    	}
    	button[type="primary"]{
    		background-color: $color-primary;
    		border-radius: 0;
    		font-size: 34upx;
    		margin-top: 60upx;
    	}
    	.links{
    		text-align: center;
    		margin-top: 40upx;
    		font-size: 26upx;
    		color: #999;
    		view{
    			display: inline-block;
    			vertical-align: top;
    			margin: 0 10upx;
    		}
    		.link-highlight{
    			color: $color-primary
    		}
    	}
    </style>

my.vue

<template>
        <view class="">
            
            <view class="cont"></view>
            <view class="margin bg-fff">
                <view class="text-center" @tap="handlerUser">
                    <image class="avatar" src="../../static/logo.png" />
                </view>
                <view class="fs-28 text-center">
                    {
       {username}}
                </view>
                <view class="flex grid">
                    <view v-for="(item,index) in gridArr" class="flex flex-direction align-center padding">
                        <text :class="['iconfont margin-bottom-xs', item.icon]"></text>
                        {
       {item.name}}
                    </view>
                    <view v-for="(item,index) in gridArr" class="flex flex-direction align-center padding">
                        <text :class="['iconfont margin-bottom-xs', item.icon]"></text>
                        {
       {item.name}}
                    </view>
                </view>
            </view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    gridArr:[
                        {
                            icon:'icon-zhangdan-xianxing',
                            name:'我的订单',
                        },{
                            icon:'icon-weicheng',
                            name:'待收货',
                        },{
                            icon:'icon-kaoqinchuqin',
                            name:'待付款',
                        },{
                            icon:'icon-yonghuziliao',
                            name:'会员等级',
                        },
                    ],
                    
                }
            },
            methods: {
                handlerUser(){
                    uni.navigateTo({
                        url:'../user/login'
                    })
                }
            },
            computed:{
                username(){
                    let {userInfo} = this.$store.state.user
                    let name = userInfo ? userInfo.username : '尚未登陆'
                    return name
                }
            }
        }
    </script>
    
    <style lang="scss">
    .cont{
        background-color: #f6f6f6;
        height: 400upx;
    }
    .grid .iconfont{
        font-size: 70upx;
        color: #888888;
    }
    .avatar{
        width: 150upx;
        height: 150upx;
        border-radius: 50%;
        // transform: translateY(-50%);
        margin-top: -75upx;
    }
    .margin.bg-fff{
        margin-top: -200upx;
    }
    </style>

[baaf6d04a1524d3ebe80703ba6e34cc0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/098a2a9fffe849f2b02f2213929890cc.png
[884a3afdc97d43778f90481852fda313.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b37f2b7ad6214e719e90a1ccb3d6744f.png