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