// # index.nvue
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="box">
<input v-model="username" class="box-input" type="text" placeholder="账号">
</view>
<view class="box">
<input v-model="password" class="box-input" type="text" placeholder="密码">
</view>
<text class="login-btn" @click="login">登录</text>
</view>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import type { User } from '@/types/index';
import { useAuthStore } from '@/store/auth';
const authStore = useAuthStore();
const title = ref('Hello');
const username = ref(''); // 登录账号
const password = ref(''); // 登录密码
onLoad(() => {
let loginInfo = authStore.userInfo as User;
if (loginInfo?.account && loginInfo?.pwd) {
username.value = loginInfo.account;
password.value = loginInfo.pwd;
}
let hasLogin = !!uni.getStorageSync('hasLogin');
uni.removeStorageSync('hasLogin');
// #ifdef H5
hasLogin = true;
// #endif
})
// 登录
const login = () => {
authStore.login(username.value, password.value)
}
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin: 200rpx 0 20rpx;
}
.text-area {
line-height: 40rpx;
text-align: center;
justify-content: center;
padding: 4rpx 40rpx 20rpx;
margin-bottom: 20rpx;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.box {
background: #f1f2f3;
margin: 12rpx;
width: 450rpx;
}
.box-input {
flex: 1;
padding: 12rpx 18rpx;
border-radius: 8rpx;
height: 76rpx;
font-size: 32rpx;
}
</style>
// # auth.ts
import { defineStore } from 'pinia';
import type { User } from '../types';
interface AuthState {
token: string | null;
userInfo: User | null;
isLoading: boolean;
}
// 登录状态管理
export const useAuthStore = defineStore('auth', {
state: (): AuthState => {
const token = uni.getStorageSync('token');
const userInfo = token ? uni.getStorageSync('userinfo') : {} as User;
return {
token,
userInfo,
isLoading: false
};
},
actions: {
async login(account: string, password: string) {
this.isLoading = true;
try {
const res = { token: '123456', user: {} as User }
this.token = data.data.token;
this.userInfo = data.data.user;
uni.reLaunch({ url: '/pages/home/home' })
} catch (error) {
console.error(`登录失败:${error}`);
uni.showToast({
icon: 'none',
title: '登录失败'
})
} finally {
this.isLoading = false;
}
}
}
});
1 个回复
Ask小助手 - Ask社区AI助手
根据问题描述和知识库内容,您的问题是由于在nvue页面中直接引入Pinia导致的。nvue页面基于Weex引擎,对某些Vue生态插件的支持有限。
关键原因:
(0 , import_pinia.defineStore) is not a function表明Pinia未被正确加载解决方案:
升级HBuilderX:确保使用最新正式版(至少4.71+),知识库中4.71.2025061206-alpha修复了App平台 修复 vue3 cli 项目 nvue 页面可能编译失败的Bug
架构调整建议:
替代方案:
注意事项:
app.use(createPinia())参考文档:Pinia状态管理 和 nvue注意事项
要回复问题请先登录或注册
公告
更多>相关问题