《通信软件前端开发》课件-40.Pinia+TypeScript 状态类型定义

《通信软件前端开发》Pinia+TypeScript状态类型定义课程导入如何定义响应式状态（State）的类型？如何定义计算属性（Getters）的返回值类型？如何定义方法（Actions）的参数和返回值类型？定义State的类型//stores/counter.tsimport{defineStore}from'pinia'import{ref,computed}from'vue'//第一步：定义状态的接口//推荐使用interface，因为它更清晰，且能被扩展exportinterfaceCounterState{count:numbername:stringitems:string[]//演示数组

user:{//演示嵌套对象

id:numberrole:'admin'|'user'}|null//可能为null}代码演示

exportconstuseCounterStore=defineStore('counter',()=>{//第二步：给ref传递泛型参数

//写法1：显式泛型（推荐，更严格）

constcount=ref<number>(0)//写法2：类型推断（如果初始值能准确推断）

constname=ref('defaultname')//自动推断为string//复杂类型的定义

constitems=ref<string[]>([])//对象或null的定义

constuser=ref<CounterState['user']>(null)//或者直接从接口复用：constuser=ref<{id:number;role:'admin'|'user'}|null>(null)//...后续代码})

pinia的安装pnpm/npmlistpiniapnpm/npminstallpinia定义Getters的类型exportconstuseCounterStore=defineStore('counter',()=>{//...state定义

//1.自动推断（最常用）

constdoubleCount=computed(()=>count.value*2)//鼠标悬停查看，类型自动推断为ComputedRef<number>//2.手动指定类型（当推断不准确或需要约束时）

constisAdmin=computed<boolean>(()=>{//假设逻辑复杂，我们强制返回布尔值

returnuser.value?.role==='admin'})//3.依赖其他getter或复杂逻辑

constcountInfo=computed(()=>{if(count.value===0)return'零'if(count.value>0)return`正数:${count.value}`return`负数:${count.value}`//TS推断为string})return{count,name,items,user,doubleCount,isAdmin,countInfo}})

定义Actions的类型exportconstuseCounterStore=defineStore('counter',()=>{//...state定义

//1.同步Action：定义参数类型

functionincrement(amount:number){//参数必须是numbercount.value+=amount}//2.修改复杂类型

functionsetUserRole(role:'admin'|'user'){//参数只能是这两个字符串

if(user.value){user.value.role=role}}

//3.异步Action：定义返回类型(Promise)asyncfunctionfetchUserData(userId:string):Promise<{success:boolean}>{try{//模拟API调用

constresponse=awaitfetch(`/api/users/${userId}`)constdata=awaitresponse.json()//假设更新stateuser.value={id:data.id,role:data.role}return{success:true}}catch{return{success:false}}}//4.多个参数的类型定义

functionupdateItem(index:number,newItem:string):void{if(items.value[index]){items.value[index]=newItem}}return{/*state和getters*/increment,setUserRole,fetchUserData,updateItem}})

在组件中使用&常见陷阱<scriptsetuplang="ts">import{useCounterStore}from'@/stores/counter'conststore=useCounterStore()//✅类型安全：自动补全count,name,doubleCountconsole.log(store.count)//✅参数类型检查：只能传numberstore.increment(5)//✅返回值类型检查store.fetchUserData('123').then(res=>{console.log(res.success)//✅类型安全})//❌错误示例：如果试图给只读的getter赋值//store.doubleCount=3//TS报错：无法分配到"doubleCount"，因为它是只读属性。//❌错误示例：传递错误参数类型//store.setUserRole('superAdmin')//TS报错：类型"superAdmin"的参数不能赋给类型"admin"|"user"的参数。</script>

在组件中使用&常见陷阱//❌不要这样const{count,increment}=useCounterStore()//count会失去响应性//✅应该这样import{storeToRefs}from'pinia'conststore=useCounterStore()const{count,doubleCount}=storeToRefs(store)//保持响应性和类型const{increment}=store//action可以直接解构

课堂总结S