【vue】pinia中的值使用 v-model绑定出现[object Object]-编程实验室

版本

"dependencies":{"pinia":"^3.0.4","vue":"^3.5.26"},"devDependencies":{"@vitejs/plugin-vue":"^6.0.3","vite":"^7.3.1","vite-plugin-vue-devtools":"^8.0.5"},"engines":{"node":"^20.19.0 || >=22.12.0"}

代码

user.js

import{defineStore}from'pinia';exportconstuseUserStore=defineStore('userStore',{actions:{changeUsername(value){if(value&&value.length<10){this.username+=value}}},getters:{getUsername(){returnthis.username.toUpperCase()}},state:()=>({username:'abc'}),})

App.vue

<script setup>import{useUserStore}from'@/store/user'import{storeToRefs}from'pinia';import{ref,toRef,toRefs}from'vue';constuser=useUserStore()// 错误constuserInfo=storeToRefs(user)console.log(userInfo.username)// 正确const{username}=storeToRefs(user)console.log(username)</script><template><!--错误--><div>{{userInfo.username}}</div><input type="text"v-model="userInfo.username"><!--正确--><div>{{username}}</div><input type="text"v-model="username"></template>

现象

分析

原因

👉问题不是出在storeToRefs，而是出在你“把一个 ref 对象当成普通值来用”的心智模型上。
[object Object]说明input 绑定到的不是字符串，而是一个对象。

关键点：`storeToRefs`返回的是什么？

constuserInfo=storeToRefs(user)

此时：

userInfo={username:Ref<string>}

也就是说：

userInfo.username→是一个 ref 对象
userInfo.username.value→ 才是真正的字符串"abc"

那为什么模板里会出现`[object Object]`？

表面看很迷惑，因为你写的是：

<input v-model="userInfo.username">

但v-model只能直接绑定：

普通变量
或单个ref

❌ 它不擅长绑定「对象里的 ref」

在这种情况下，Vue 会把整个Ref当成值塞进 input，于是：

String(Ref) → [object Object]

为什么很多教程让你这样写？

const{username}=storeToRefs(user)

因为这样：

username===Ref<string>

这是一个干净的 ref，非常适合v-model

✅ 正确、推荐写法（重点）

App.vue

<script setup> import { useUserStore } from '@/store/user' import { storeToRefs } from 'pinia' const user = useUserStore() const { username } = storeToRefs(user) </script> <template> <div>{{ username }}</div> <input type="text" v-model="username" /> </template>