uni-app 登入功能 vuex使用

目录

功能介绍

运行效果

未登入状态

登入页面

进行登入完后 

代码演示

功能结构

请求封装 详细文章

部分api.ts 关于 用户登入接口

store index.ts

store  user.ts

main.js

App.vue

 type login.ts

login.vue

user.vue

---

功能介绍

vuex 本地缓存 对用户信息进行记入 请求封装 登入页面 个人页面展示

运行效果

未登入状态

点击头像部分即可跳登入页面

登入页面

进行登入完后 

代码演示

功能结构

请求封装 详细文章

部分api.ts 关于 用户登入接口

1.  
   //登入接口
2.  
   interface LoginData {
3.  
   userTelephone: string,
4.  
   userPassword: string
5.  
   }
6.  
   export function login(data: LoginData) {
7.  
   return request({
8.  
   url: "/user/userLoginByPassword",
9.  
   method: "post",
10.  
    data
11.  
    })
12.  
    }

store index.ts

1.  
   import { createStore } from 'vuex'
2.  
   import user from '@/store/user.ts'
3.  
   //创建store实例
4.  
   const store = createStore({
5.  
   //引入模块
6.  
   modules:{
7.  
   user
8.  
   }
9.  
   })
10.  
    export default store
11.  
     
12.  
     

store  user.ts

1.  
   import {login} from '@/api/api.ts'
2.  
   export default {
3.  
   //开启命名空间后 访问所以属性都需要带模块名
4.  
   namespaced:true,
5.  
   state(){
6.  
   return {
7.  
   userInfo : null
8.  
   }
9.  
   },
10.  
    mutations: {
11.  
    initInfo(state,info){
12.  
    state.userInfo=info
13.  
    }
14.  
    },
15.  
    actions: {
16.  
    userLogin(context,info){
17.  
    login(info).then((res) => {
18.  
    if(res){
19.  
    context.commit('initInfo',res.data);
20.  
    console.log(res.data);
21.  
    //本地存储用户信息
22.  
    uni.setStorage({
23.  
    key:'userInfo',
24.  
    data: res.data
25.  
    })
26.  
    //返回上一页
27.  
    uni.navigateBack({
28.  
    delta: 1
29.  
    })
30.  
    }
31.  
    })
32.  
    }
33.  
    }
34.  
    }

main.js

1.  
   // #ifdef VUE3
2.  
   import {
3.  
   createSSRApp
4.  
   } from 'vue'
5.  
   import useAPP from './App.vue'
6.  
   //引入store
7.  
   import store from './store'
8.  
   export function createApp() {
9.  
   const app = createSSRApp(useAPP)
10.  
    app.use(store)
11.  
    return {
12.  
    app
13.  
    }
14.  
    }

App.vue

1.  
   <script setup>
2.  
   import { onLaunch } from '@dcloudio/uni-app';
3.  
   import { useStore } from 'vuex';
4.  
   onLaunch(()=>{
5.  
   //本地缓存已存在登入信息 直接放入store中
6.  
   try{
7.  
   const store = useStore();
8.  
   const user=uni.getStorageSync('userInfo');
9.  
   if(user){
10.  
    store.commit('user/initInfo',user)
11.  
    }
12.  
    }catch(e){
13.  
    console.log('提取用户信息失败');
14.  
    }
15.  
    })
16.  
    </script>
17.  
     
18.  
    <style lang="scss">
19.  
    /*每个页面公共css */
20.  
    @import '@/uni_modules/uni-scss/index.scss';
21.  
    /* #ifndef APP-NVUE */
22.  
    @import '@/static/customicons.css';
23.  
    // 设置整个项目的背景色
24.  
    page {
25.  
    background-color: #f5f5f5;
26.  
    }
27.  
     
28.  
    /* #endif */
29.  
    .example-info {
30.  
    font-size: 14px;
31.  
    color: #333;
32.  
    padding: 10px;
33.  
    }
34.  
    </style>

 type login.ts

1.  
   export interface LoginForm {
2.  
   userTelephone: string
3.  
   userPassword: string
4.  
   }
5.  
   export class LoginData{
6.  
   ruleForm:LoginForm={
7.  
   userTelephone: "",
8.  
   userPassword:""
9.  
   }
10.  
    }

login.vue

1.  
   <template>
2.  
   <view class="content">
3.  
   <view class="avatorWrapper">
4.  
   <view class="avator"><image class="img" src="../../static/logo.png" mode="widthFix"></image></view>
5.  
   </view>
6.  
   <view class="form">
7.  
   <view class="inputWrapper"><input v-model="data.ruleForm.userTelephone" class="input" type="text" value="" placeholder="请输入电话号码" /></view>
8.  
   <view class="inputWrapper"><input v-model="data.ruleForm.userPassword" class="input" type="password" value="" placeholder="请输入密码" /></view>
9.  
   <view class="loginBtn" @click="toLogin()"><text class="btnValue">登入</text></view>
10.  
    <view class="forgotBtn"><text>找回密码</text></view>
11.  
    </view>
12.  
    </view>
13.  
    </template>
14.  
     
15.  
    <script setup lang="ts">
16.  
    import { LoginData } from '@/type/login';
17.  
    import { login } from '../../api/api.ts';
18.  
    import { reactive } from 'vue';
19.  
    import { useStore } from 'vuex';
20.  
    //用户输入数据
21.  
    const data = reactive(new LoginData());
22.  
    const store = useStore();
23.  
    const toLogin = () => {
24.  
    //通过vuex 进行登入操作
25.  
    store.dispatch('user/userLogin', data.ruleForm);
26.  
    };
27.  
    </script>
28.  
     
29.  
    <style lang="scss">
30.  
    .content {
31.  
    background: #377eb4;
32.  
    width: 100vw;
33.  
    height: 100vh;
34.  
    background-image: url(@/static/bt/bt-2.jpg);
35.  
    }
36.  
    .avatorWrapper {
37.  
    height: 30vh;
38.  
    width: 100vw;
39.  
    display: flex;
40.  
    justify-content: center;
41.  
    align-items: flex-end;
42.  
    }
43.  
    .avator {
44.  
    width: 200upx;
45.  
    height: 200upx;
46.  
    overflow: hidden;
47.  
    }
48.  
    .avator .img {
49.  
    width: 100%;
50.  
    }
51.  
    .form {
52.  
    padding: 0 100upx;
53.  
    margin-top: 80px;
54.  
    }
55.  
    .inputWrapper {
56.  
    width: 100%;
57.  
    height: 80upx;
58.  
    background: white;
59.  
    border-radius: 20px;
60.  
    box-sizing: border-box;
61.  
    padding: 0 20px;
62.  
    margin-top: 25px;
63.  
    }
64.  
    .inputWrapper .input {
65.  
    width: 100%;
66.  
    height: 100%;
67.  
    text-align: center;
68.  
    font-size: 15px;
69.  
    }
70.  
    .loginBtn {
71.  
    width: 100%;
72.  
    height: 80upx;
73.  
    background: #77b307;
74.  
    border-radius: 50upx;
75.  
    margin-top: 50px;
76.  
    display: flex;
77.  
    justify-content: center;
78.  
    align-items: center;
79.  
    }
80.  
    .loginBtn .btnValue {
81.  
    color: white;
82.  
    }
83.  
    .forgotBtn {
84.  
    text-align: center;
85.  
    color: #eaf6f9;
86.  
    font-size: 15px;
87.  
    margin-top: 20px;
88.  
    }
89.  
    </style>

user.vue

1.  
   <template>
2.  
   <view class="content">
3.  
   <view class="userback" @click="toLogin(getUserName)">
4.  
   <img :src="getUserImg">
5.  
   <view class="userName">{{getUserName}}</view>
6.  
   </view>
7.  
   </view>
8.  
    
9.  
   </template>
10.  
     
11.  
    <script setup lang="ts">
12.  
    import { computed ,ref} from 'vue'
13.  
    import { useStore } from 'vuex';
14.  
    //全局常量
15.  
    import globalParam from '@/common/operate.ts'
16.  
    const store = useStore();
17.  
    //vuex 获取用户名称
18.  
    const getUserName= computed({
19.  
    get:()=>{
20.  
    let {userInfo} = store.state.user;
21.  
    let userName= userInfo ? userInfo.userName : '未登入'
22.  
    return userName
23.  
    }
24.  
    })
25.  
    //vuex 获取用户头像
26.  
    const getUserImg= computed({
27.  
    get:()=>{
28.  
    let {userInfo} = store.state.user;
29.  
    let userImg= userInfo ? globalParam.imgBaseURL userInfo.picUrl : '../../static/user/user.png'
30.  
    return userImg
31.  
    }
32.  
    })
33.  
    // 点击头像 如果未登入状态 点击跳登入页面
34.  
    const toLogin=(userName)=>{
35.  
    if(userName === '未登入'){
36.  
    uni.navigateTo({
37.  
    url: '../login/login'
38.  
    })
39.  
    }
40.  
    }
41.  
     
42.  
    </script>
43.  
     
44.  
    <style lang="scss">
45.  
    .content {
46.  
    width: 100vw;
47.  
    height: 90vh;
48.  
    background-image: url(@/static/bt/bt-2.jpg);
49.  
    text-align: center
50.  
    }
51.  
     
52.  
    .userback img {
53.  
    margin: auto;
54.  
    border-radius: 50%;
55.  
    margin-top: 21%;
56.  
    width: 300upx;
57.  
    height: 300upx;
58.  
    }
59.  
    .userName{
60.  
    color: #111111;
61.  
    font-size: 2rem;
62.  
    }
63.  
    </style>

这篇好文章是转载于：学新通技术网