问题遇到的现象和发生背景
使用vue+pinia构建项目，定义userStore中的action事件login，调用不成功
问题相关代码，请勿粘贴截图
**store中的use.ts文件**
import { defineStore } from 'pinia'
type role = string[]
export const userStore = defineStore('user', {
state: () => ({
token: '',
roles: <role>[]
}),
getters: {
roles: (state) => state.roles,
token: (state) => state.token
},
actions: {
login() {
console.log("login调用成功")
this.token = '1234567890qwertyuiop'
},
getUserInfo() {
this.roles = ['organzier', 'role', 'user', 'company']
}
}
})
**登录页login.vue**
<template>
<div>
<img alt="Vue logo" src="../../assets/logo.png" />
<n-form
ref="userFormRef"
:model="userForm"
:rules="userRules"
label-placement="left"
label-width="120px"
:size="formSize"
>
<n-form-item label="username" prop="username">
<n-input v-model:value="userForm.username" type="text" autocomplete="on" clearable />
</n-form-item>
<n-form-item label="Password" prop="password">
<n-input v-model:value="userForm.password" type="password" autocomplete="off" clearable />
</n-form-item>
<div>
<n-button type="primary" @click="submit">登录</n-button>
</div>
</n-form>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, Ref } from 'vue'
import { FormInst, FormItemRule } from 'naive-ui'
import { userStore } from '@/store/user'
import { useRouter } from 'vue-router'
// 定义路由放在此位置置顶
const router = useRouter()
**const userStoreData = userStore()**
const formSize:Ref<string> = ref('small')
const userFormRef = ref<FormInst | null>(null)
const userForm = reactive({
username: undefined,
password: undefined
})
const validateUsername = (rule: FormItemRule, value: string, callback: Function) => {
if (!value) {
callback(new Error('用户名不能为空'))
} else if (value.length < 3) {
callback(new Error('用户名不能少于3个字符'))
} else {
callback()
}
}
const validatePassword = (rule: FormItemRule, value: string, callback: Function) => {
if (!value) {
callback(new Error('密码不能为空'))
} else if (value.length < 6) {
callback(new Error('密码不能少于3个字符'))
} else {
callback()
}
}
const userRules = {
username: [{ validator: validateUsername, trigger: 'blur' }],
password: [{ validator: validatePassword, trigger: 'blur' }]
}
const submit = (e: MouseEvent) => {
e.preventDefault()
**userStoreData.login()**
console.log(userStoreData)
**此时打印userStoreData是proxy对象，但是调用login不成功，控制台没有打印出‘login调用成功’，不知道是为什么？？？**
router.push('/')
userFormRef.value?.validate((errors) => {
if (!errors) {
// 验证成功
} else {
console.log(errors)
// 验证失败
}
})
}
</script>
<style scoped>
</style>
运行结果及报错内容
login方法调用不成功
我的解答思路和尝试过的方法
代码已比对pinia检验，但是看不出来问题
我想要达到的结果
控制台打印‘login调用成功’，login方法生效
