vue3 pinia 查找数据怎么写
时间: 2025-03-03 13:35:28 浏览: 43
### 如何在 Vue3 中使用 Pinia 进行数据查询
#### 创建 Store 并定义 State 和 Actions
为了实现数据查询功能,首先需要创建一个 `store` 来管理状态 (state),并定义用于执行查询操作的动作(actions)。
```javascript
// store/userStore.js
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({
users: [],
}),
actions: {
async fetchUsers() {
try {
// 模拟API请求
let response = await fetch('/api/users');
this.users = await response.json();
} catch (error) {
console.error(error);
}
},
getUserById(id) {
return this.users.find(user => user.id === id);
}
}
});
```
上述代码展示了如何通过 `defineStore` 函数来设置一个新的仓库(store)[^3]。这里定义了一个名为 `users` 的数组用来保存用户列表,并提供了两个动作:一个是异步获取用户的函数 `fetchUsers()`;另一个是从当前存储的数据中按 ID 查找特定用户的同步方法 `getUserById()`。
#### 使用 Store 在组件内发起查询
接下来,在任何 Vue 组件里都可以轻松访问这个 store 及其提供的 action 方法来进行数据查询:
```html
<template>
<div v-if="loading">Loading...</div>
<ul v-else>
<li v-for="(user, index) in users" :key="index">
{{ user.name }}
<!-- 调用 getUserById 获取单个用户详情 -->
<button @click="showDetails(user.id)">Show Details</button>
</li>
</ul>
<pre>{{ selectedUser }}</pre>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useUserStore } from '../stores/userStore';
const loading = ref(true);
const users = ref([]);
const selectedUser = ref(null);
const userStore = useUserStore();
onMounted(async () => {
await userStore.fetchUsers();
users.value = [...userStore.users];
loading.value = false;
});
function showDetails(userId){
selectedUser.value = userStore.getUserById(userId);
}
</script>
```
这段模板和脚本部分说明了怎样利用刚刚建立好的 `useUserStore` 实现页面加载时自动拉取全部用户信息以及点击按钮显示指定用户的详细资料的功能。
阅读全文
相关推荐


















