vue3.x教程-Pinia状态管理-从服务器获取数据-马育民老师

在 [vue3.x教程-Pinia状态管理-读取数据](https://malaoshi.top/show_1GW3iT5KGrxt.html "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>

# Rename.vue

由于在 `User.vue` 组件中已经调用 `get()` 方法了，此时 Store 中已经保存用户信息，所以在 `Rename.vue` 组件中可以不用调用 `get()` 函数

原文出处：http://malaoshi.top/show_1GW3iZ8hxx6n.html