vue3 pinia store里怎么定义对象？并保持响应式？

Question

在pinia中，想定义一个对象userinfostate,可以用reactive定义吗？并保持响应性？这种写法是可以的吗？应该怎么正确使用呢？

userinfo={
    userid:'',
    name:'',
    phone:'',
    avatar:''
}

export const useUserStore = defineStore('user', {
     const userinfo = reactive({
      userid:'',
      name:'',
      phone:'',
      avatar:''
    })
  return { userinfo }
})

Answer 1

看pinia的官方文档:

https://pinia.vuejs.org/zh/core-concepts/
https://pinia.vuejs.org/zh/core-concepts/state.html

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // 为了完整类型推理，推荐使用箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断出它们的类型
      count: 0,
      name: 'Eduardo',
      isAdmin: true,
      items: [],
      hasChanged: true,
    }
  },
})

Answer 2

import { reactive } from 'vue'
import { defineStore } from 'pinia'

export const useUserStore = defineStore('userinfo', () => {
  const userinfo = reactive({
    userId: '',
    name: '',
    phone: '',
    avatar: ''
  })
  return { userinfo }
})