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

原创已于 2026-04-06 21:59:22 修改 · 78 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #前端 #typescript

于 2026-04-06 21:58:18 首次发布

在 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[];