uniapp 登入功能 vuex使用 通俗易懂

目录

功能介绍

运行效果

未登入状态

登入页面

进行登入完后 

代码演示

功能结构

请求封装 详细文章

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

store index.ts

store  user.ts

main.js

App.vue

 type login.ts

login.vue

user.vue

---

功能介绍

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

运行效果

未登入状态

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

登入页面

进行登入完后 

代码演示

功能结构

请求封装 详细文章

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

//登入接口
interface LoginData {
    userTelephone: string,
    userPassword: string
}
export function login(data: LoginData) {
    return request({
        url: "/user/userLoginByPassword",
        method: "post",
        data
    })
}

store index.ts

import { createStore } from 'vuex'
import user from '@/store/user.ts'
//创建store实例
const store = createStore({
	//引入模块
	modules:{
		user
	}
})
export default store

store  user.ts

import {login} from '@/api/api.ts'
export default {
	//开启命名空间后 访问所以属性都需要带模块名
	namespaced:true,
	state(){
		return {
			userInfo : null
		}
	},
	mutations: {
		initInfo(state,info){
			state.userInfo=info
		}
	},
	actions: {
		userLogin(context,info){
			login(info).then((res) => {
				   if(res){
					 context.commit('initInfo',res.data); 
					 console.log(res.data);
					 //本地存储用户信息
					 uni.setStorage({
					 	key:'userInfo',
						data: res.data
					 })
					 //返回上一页
					 uni.navigateBack({
					 	delta: 1
					 })
				   }
			      })
		}
	}
}

main.js

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
import useAPP from './App.vue'
//引入store
import store from './store'
export function createApp() {
	const app = createSSRApp(useAPP)
	app.use(store)
	return {
		app
	}
}

App.vue

 type login.ts

export interface LoginForm {
    userTelephone: string
    userPassword: string
}
export class LoginData{
    ruleForm:LoginForm={
        userTelephone: "",
        userPassword:""
    }
}

login.vue

user.vue