当前位置：首页 > news >正文

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

news 2026/6/6 0:44:36

在 hook 中错误使用 Store：useStore() 在函数外部调用

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 = ref<IDepartmentUserTree[]>([]); const departments = ref<Department[]>([]); 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?v=0dde4c6a: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 中正确使用 Store：useStore() 在函数内部调用

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 = ref<IDepartmentUserTree[]>([]); const departments = ref<Department[]>([]); 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[];