Store
//store里的数据const userId=ref(6699)const userMsg=reactive({token:'addadgsadadadada',phone:'13111111111',age:13})const updateUser=(newUserId)=>{userId.value=newUserId}
组件
import {useUser} from "@/store/user.js";
//导入store
const userStore =useUser()
//得到 user 模块返回的对象
console.log(userStore.userId)
//获取用户数据
<h1>用户信息{{userStore.userMsg}}</h1>
正常情况下需要这样去获取或者调用完方法,这都需要通过userStore.xxx去获取,有时候想直接通过方法名去使用。
const { userId ,level} =userStore
可以使用结构化赋值,但是这样失去了响应式。
正确写法
使用storeToRefs
<script setup>
import {useUser} from "@/store/user.js";
import {storeToRefs} from "pinia";const userStore =useUser()
//得到 user 模块返回的对象const { userId ,level} =storeToRefs( userStore)
<h1>用户ID{{userId}}</h1>
这样就不用去userStore.xxx去获取数据。
storeToRefs只负责数据的相关处理,如是方法就会失效。
使用函数
const { updateUser} = userStore