Nuxt3+Pinia中CognitoUserPool类属性无法识别问题求助

在基于Nuxt3（Pinia状态管理）的项目中，使用amazon-cognito-identity-js库操作Amazon Cognito创建新用户时，无法识别CognitoUserPool类的属性。已完成以下操作：

• 执行npm install --save amazon-cognito-identity-js安装依赖
• 创建Pinia Store
• 从amazon-cognito-identity-js导入{CognitoUserPool}
• 定义CognitoUserPool类型的常量

但设置包含UserPoolId和ClientId的poolData时，CognitoUserPool的属性无法被识别，代码示例如下：

import { defineStore } from 'pinia'
import {CognitoUserPool,} from 'amazon-cognito-identity-js'

export const useCognitoAuthStore = defineStore('CognitoAuthStore', () => {
 const cognitoUserPool = ref({} as CognitoUserPool)
}

async function signup() {
//The property UserPoolId is not being recognized. 
cognitoUserPool.UserPoolId 
}

疑问：是不是在TypeScript中未正确实例化该常量？

你的问题核心是没有正确实例化CognitoUserPool对象，同时存在Pinia语法和Vue响应式对象使用的问题，具体修正步骤如下：

1. 正确实例化CognitoUserPool
   CognitoUserPool是类，必须通过new关键字传入配置参数创建实例，不能直接声明空对象并断言类型。先定义池配置：

const poolData = {
  UserPoolId: '你的用户池ID', // 替换为实际值
  ClientId: '你的客户端ID'    // 替换为实际值
}

再创建实例并包装为响应式对象：

const cognitoUserPool = ref(new CognitoUserPool(poolData))

2. 修正Pinia Store语法错误
   defineStore的回调函数需要正确闭合，且signup函数要放在回调内部，才能访问cognitoUserPool变量。

3. 正确访问响应式对象属性
   由于cognitoUserPool是Vue的ref响应式对象，需通过.value访问内部实例属性：

async function signup() {
  // 直接访问实例属性
  const poolId = cognitoUserPool.value.UserPoolId
  // 更推荐使用官方提供的方法获取（避免属性访问权限问题）
  const officialPoolId = cognitoUserPool.value.getUserPoolId()
}

4. 完整修正代码示例

import { defineStore } from 'pinia'
import { ref } from 'vue'
import { CognitoUserPool } from 'amazon-cognito-identity-js'

export const useCognitoAuthStore = defineStore('CognitoAuthStore', () => {
  // 定义Cognito池配置
  const poolData = {
    UserPoolId: 'your-user-pool-id',
    ClientId: 'your-client-id'
  }

  // 正确实例化并包装为响应式对象
  const cognitoUserPool = ref(new CognitoUserPool(poolData))

  async function signup() {
    console.log('UserPoolId:', cognitoUserPool.value.UserPoolId)
    console.log('UserPoolId via method:', cognitoUserPool.value.getUserPoolId())
  }

  return { cognitoUserPool, signup }
})

5. 额外注意事项

• 若缺少类型定义，安装类型包：

npm install --save-dev @types/amazon-cognito-identity-js

• CognitoUserPool部分属性为私有/受保护，优先使用官方提供的方法（如getUserPoolId()、getClientId()）获取配置，避免兼容性问题。

内容的提问来源于stack exchange，提问作者launchCode