【Uniapp-Vue3】开发userStore用户所需的相关操作

在项目根路径下创建的stores文件夹中创建user.js文件 

并将以下内容复制到user.js中

import {ref} from "vue"
import { defineStore } from 'pinia';
const uniIdCo = uniCloud.importObject("uni-id-co")
const db = uniCloud.database();
const usersTable = db.collection('uni-id-users')

export const useUserStore = defineStore("user",()=>{
	let hostUserInfo = uni.getStorageSync('uni-id-pages-userInfo')||{}
	const userInfo = ref(hostUserInfo);
	const hasLogin= ref(Object.keys(hostUserInfo).length != 0);
	
	
	// data不为空,表示传递要更新的值(注意不是覆盖是合并),什么也不传时,直接查库获取更新
	async function updateUserInfo(data = false) {
		if (data) {
			usersTable.where('_id==$env.uid').update(data).then(e => {
				// console.log(e);
				if (e.result.updated) {
					uni.showToast({
						title: "更新成功",
						icon: 'none',
						duration: 3000
					});
					setUserInfo(data)
				} else {
					uni.showToast({
						title: "没有改变",
						icon: 'none',
						duration: 3000
					});
				}
			})
	
		} else {
			const uniIdCo = uniCloud.importObject("uni-id-co", {
				customUI: true
			})
			try {
				let res = await usersTable.where("'_id' == $cloudEnv_uid")
					.field('mobile,nickname,username,email,avatar_file')
					.get()
	
				const realNameRes = await uniIdCo.getRealNameInfo()
	
				// console.log('fromDbData',res.result.data);
				setUserInfo({
					...res.result.data[0],
					realNameAuth: realNameRes
				})
			} catch (e) {
				setUserInfo({},{cover:true})
				console.error(e.message, e.errCode);
			}
		}
	}
	
	
	async function setUserInfo(data, {cover}={cover:false}) {
		// console.log('set-userInfo', data);
		let _userInfo = cover?data:Object.assign(userInfo.value,data)
		userInfo.value = Object.assign({},_userInfo)
		hasLogin.value = Object.keys(userInfo.value).length != 0
		// console.log('store.userInfo', store.userInfo);
		uni.setStorageSync('uni-id-pages-userInfo', userInfo.value)
		return data
	}
	
	
	async function logout() {
		// 1. 已经过期就不需要调用服务端的注销接口	2.即使调用注销接口失败,不能阻塞客户端
		if(uniCloud.getCurrentUserInfo().tokenExpired > Date.now()){
			try{
				await uniIdCo.logout()
			}catch(e){
				console.error(e);
			}
		}
		uni.removeStorageSync('uni_id_token');
		uni.setStorageSync('uni_id_token_expired', 0)		
		uni.$emit('uni-id-pages-logout')
		setUserInfo({},{cover:true})
	}
	
	//登录后的操作
	function loginSuccess(e = {}){
		const {
			showToast = true, toastText = '登录成功', autoBack = true, uniIdRedirectUrl = '', passwordConfirmed
		} = e
		// console.log({toastText,autoBack});
		if (showToast) {
			uni.showToast({
				title: toastText,
				icon: 'none',
				duration: 3000
			});
		}
		updateUserInfo()	
		uni.$emit('uni-id-pages-login-success')	
	}
			
	return {userInfo,hasLogin,loginSuccess,updateUserInfo}
})

在updateUserInfo函数中修改需要的字段

具体字段可以在database文件下的uni-id-users.schema数据表中查看

我们在获取的时候可以通过如下方式对字段取别名:

字段 as 别名

### 项目资源与获取方式 目前在开源社区中,关于 `uniapp-vue3-citylife` 类似项目的资源主要集中在 GitHub 和 Gitee 等代码托管平台上。尽管无法提供特定项目的直接链接,但可以通过以下关键词在相关平台上搜索到类似的开源项目: - **GitHub 搜索关键词**: - `uniapp vue3 city life` - `uniapp 同城生活` - `uniapp vue3 多端兼容` - **Gitee 搜索关键词**: - `uniapp 同城服务` - `uniapp vue3 生活类项目` - `uniapp 城市生活平台` 建议使用如下格式在 GitHub 或 Gitee 上进行高级搜索: ``` "uniapp" "vue3" "同城" OR "生活" in:readme language:JavaScript ``` 通过该方式可以找到多个具备以下特征的项目[^1]: - 基于 **Vue3 + Uniapp** 构建的多端兼容项目,支持 App、H5、微信小程序等。 - 后端通常使用 **PHP + MySQL** 或 **Node.js + Express** 实现 RESTful 接口服务。 - 包含完整的项目结构,如用户登录、服务发布、订单管理、聊天系统等核心模块。 ### 示例项目结构 以下是一个典型的 `uniapp-vue3-citylife` 项目结构示例: ```bash uniapp-vue3-citylife/ ├── pages/ # 页面文件 │ ├── index/ # 首页 │ ├── category/ # 服务分类 │ └── user/ # 用户中心 ├── components/ # 公共组件 ├── store/ # Vuex 状态管理 ├── api/ # 接口请求封装 ├── utils/ # 工具函数 ├── App.vue # 应用入口 └── main.js # 项目启动文件 ``` ### 项目部署与运行 若已获取项目源码,需确保开发环境具备以下工具: - **HBuilderX** 或 **VSCode**:用于项目开发与调试。 - **npm/yarn**:用于安装项目依赖。 - **微信开发者工具**(如需运行小程序端)。 - **后端服务**:如使用 PHP + MySQL,需配置本地或线上服务器环境。 运行步骤如下: 1. 克隆项目到本地。 2. 安装依赖:`npm install`。 3. 修改 `api` 模块中的接口地址,指向本地或远程后端服务。 4. 使用 HBuilderX 打开项目并运行至目标平台。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值