在 vue3.x教程-Pinia状态管理-读取数据 例子的基础上，在 User.ts 定义方法，从服务器获取数据
修改 User.ts
在 actions 中定义 get() 方法，模拟发送ajax请求，获取服务器返回的数据
选项式写法
import {defineStore} from 'pinia'
import {ref} from 'vue'
/*
变量命名
一般情况：use+文件名+Store
复杂情况：use+业务名+Store
*/
/*
定义store，vue2选项式写法
第一个参数是唯一标识
第二个参数是对象
*/
export const useUserStore = defineStore('user',{
// 定义State状态：存储初始数据，必须是函数且返回对象
state(){
return {
// 初始化，选项式，不需要定义成ref，会自动处理
nickname: '',
role:'',
dept:''
}
},
// 薪增actions选项
actions:{
// 定义获取数据的方法
get(){
// 模拟发送请求
console.log("模拟发送ajax请求...")
// 模拟ajax获取的结果
const res = {
// 选项式，不需要定义成ref，会自动处理
nickname: '李雷',
role:'管理员',
dept:'人力资源部'
}
// 批量修改数据
this.$patch(res)
}
}
})
组合式写法
import {defineStore} from 'pinia'
import {ref} from 'vue'
/*
定义store，vue3组合式写法
第一个参数是唯一标识
第二个参数是对象
*/
export const useUserStore = defineStore(
'user',
()=>{
const nickname = ref('')
const role = ref('')
const dept = ref('')
// 定义修改方法
const get = () => {
// 模拟发送请求
console.log("模拟发送ajax请求...")
// 模拟ajax获取的结果
const res = {
// 选项式，不需要定义成ref，会自动处理
nickname: '李雷',
role:'管理员',
dept:'人力资源部'
}
// 组合式api没有this，不能用批量修改数据
// this.$patch(value)
nickname.value = res.nickname
role.value = res.role
dept.value = res.dept
}
return {
// 组合式，推荐定义成ref。不定义成ref，会自动处理，但可能出问题
nickname,
role,
dept,
get,
}
}
)
修改 User.vue
要调用 get() 函数
<template>
<div class="c1">
<h1>User组件</h1>
昵称：{{userStore.nickname}}<br>
角色：{{userStore.role}}<br>
部门：{{userStore.dept}}<br>
</div>
</template>
<script setup lang="ts">
// 导入store
import {useUserStore} from '@/stores/User.ts'
// 创建store对象
const userStore = useUserStore()
// 调用 get() 方法，从服务器获取数据
userStore.get()
// 使用store中的state状态中的数据
console.log('nickname:',userStore.nickname)
</script>
<style scoped>
.c1{
border: 1px solid green;
}
</style>
Rename.vue
由于在 User.vue 组件中已经调用 get() 方法了，此时 Store 中已经保存用户信息，所以在 Rename.vue 组件中可以不用调用 get() 函数