Vue3 使用 Store 的注意事项：官方推荐的方式始终是在 setup 或 composable 函数内部调用 useStore()

在 hook 中错误使用 StoreuseStore() 在函数外部调用import { useUserList } from /hooks; import { useDepartmentStore } from /stores; import type { Department } from /types; import { onMounted, ref } from vue; // Store const departmentStore useDepartmentStore(); // 用户节点树 interface IDepartmentUserTree { // 树节点部门编号 value: string; // 树节点部门名称 label: string; // 子节点 children?: IDepartmentUserTree[]; } /** * 部门用户树 hook * returns */ export const useDepartmentUserTree () { // 部门用户树数据 const departmentUserTreeData refIDepartmentUserTree[]([]); const departments refDepartment[]([]); const { userList, fetchUserListData } useUserList({ immediate: false }); // 创建部门用户树数据 const createDepartmentUserTreeData () { departments.value.forEach((department) { departmentUserTreeData.value.push({ value: department.deptId, label: department.deptName, children: userList.value .filter((user) user.deptId department.deptId) .map((user) { return { value: user.userName!, label: user.moniker! }; }) }); }); }; onMounted(async () { try { if (departmentStore.departments.length 0) { const result await departmentStore.getDepartments(); departments.value [...result]; } await fetchUserListData(); createDepartmentUserTreeData(); } catch (error) { console.error(Failed to build department-user tree:, error); } }); return { departmentUserTreeData }; }; export default useDepartmentUserTree;程序启动报错报错信息pinia.js?v0dde4c6a:1340Uncaught Error: []: getActivePinia() was called but there was no active Pinia. Are you trying to use a store before calling app.use(pinia)? Seehttps://pinia.vuejs.org/core-concepts/outside-component-usage.html for help. This will fail in production. atuseDepartmentUserTree.ts:7:25在 hook 中正确使用 StoreuseStore() 在函数内部调用import { useUserList } from /hooks; import { useDepartmentStore } from /stores; import type { Department } from /types; import { onMounted, ref } from vue; // 用户节点树 interface IDepartmentUserTree { // 树节点部门编号 value: string; // 树节点部门名称 label: string; // 子节点 children?: IDepartmentUserTree[]; } /** * 部门用户树 hook * returns */ export const useDepartmentUserTree () { // 部门用户树数据 const departmentUserTreeData refIDepartmentUserTree[]([]); const departments refDepartment[]([]); const { userList, fetchUserListData } useUserList({ immediate: false }); // Store const departmentStore useDepartmentStore(); // 创建部门用户树数据 const createDepartmentUserTreeData () { departments.value.forEach((department) { departmentUserTreeData.value.push({ value: department.deptId, label: department.deptName, children: userList.value .filter((user) user.deptId department.deptId) .map((user) { return { value: user.userName!, label: user.moniker! }; }) }); }); }; onMounted(async () { try { if (departmentStore.departments.length 0) { const result await departmentStore.getDepartments(); departments.value [...result]; } await fetchUserListData(); createDepartmentUserTreeData(); } catch (error) { console.error(Failed to build department-user tree:, error); } }); return { departmentUserTreeData }; }; export default useDepartmentUserTree;import { useUserList } from /hooks;import { useDepartmentStore } from /stores;import type { Department } from /types;import { onMounted, ref } from vue;// 用户节点树interface IDepartmentUserTree {// 树节点部门编号value: string;// 树节点部门名称label: string;// 子节点children?: IDepartmentUserTree[];}/*** 部门用户树 hook* returns*/export const useDepartmentUserTree () {// 部门用户树数据const departmentUserTreeData refIDepartmentUserTree[]([]);const departments refDepartment[]([]);const { userList, fetchUserListData } useUserList({ immediate: false });// Storeconst departmentStore useDepartmentStore();// 创建部门用户树数据const createDepartmentUserTreeData () {departments.value.forEach((department) {departmentUserTreeData.value.push({value: department.deptId,label: department.deptName,children: userList.value.filter((user) user.deptId department.deptId).map((user) {return {value: user.userName!,label: user.moniker!};})});});};onMounted(async () {try {if (departmentStore.departments.length 0) {const result await departmentStore.getDepartments();departments.value [...result];}await fetchUserListData();createDepartmentUserTreeData();} catch (error) {console.error(Failed to build department-user tree:, error);}});return {departmentUserTreeData};};export default useDepartmentUserTree;