问题：
vue3 pinia 多个stores文件能不能合并？
益炜
vue3 pinia
好几个文件里面代码很多都是一样的，有没有什么办法可以写一个就可以了。
下面两个 stores 就 DTO 里面和 apiList 里面的请求的 api 不一样，怎样可以不用写很多个，而不影响
// userOptions.jsimport {computed, ref} from 'vue'import {defineStore} from 'pinia'import {listRole} from "@/apis/role";import {cardActionReload, notyError} from "@/utils";import {useEventOptionsStore} from "@/stores/eventOptions";export const useRoleOptionsStore = defineStore('roleOptions', () => { const eventOptions = useEventOptionsStore(); const cardEvent = ref() const disabled = ref(false) const list = ref([]); const count = ref(0); const page_size_list = ref([5, 10, 20, 50, 100]) const total_page = computed(() => { if (count.value === 0 || DTO.value.page_size >= count.value) { return 1; } else { return (count.value % DTO.value.page_size === 0) ? (count.value / DTO.value.page_size) : Math.ceil(count.value / DTO.value.page_size); } }) const page_list = computed(() => { let arr = []; if (total_page.value <= 7) { for (let i = 0; i < (total_page.value - 1); i++) { arr.push(i + 2); } } else { if (DTO.value.page >= 5) { if (total_page.value - DTO.value.page < 2) { arr = [total_page.value - 4, total_page.value - 3, total_page.value - 2, total_page.value - 1, total_page.value]; } else { arr = [DTO.value.page - 2, DTO.value.page - 1, DTO.value.page, DTO.value.page + 1, DTO.value.page + 2]; } } else { arr = [2, 3, 4, 5, 6, 7]; } } return arr; }) const editPage = async (page) => { DTO.value.has_count = false; DTO.value.page = parseInt(page); await apiList(); } const editPageSize = async (page_size) => { if (page_size) { DTO.value.page_size = parseInt(page_size); } DTO.value.has_count = false; DTO.value.page = 1; await apiList(); } const DTO = ref({ role: '', page: 1, page_size: 20 }); const apiList = async () => { const reload = cardActionReload(cardEvent.value); reload.open(); const {code, msg, data} = await listRole(DTO.value); if (code === 0 && data) { list.value = data.list; count.value = data.count; } else { notyError(msg); } reload.close(); eventOptions.classContentInnerEvent?.scrollTo(0, 0); } return {cardEvent, disabled, list, count, page_size_list, total_page, page_list, editPage, editPageSize, DTO, apiList}})// userOptions.jsimport {computed, ref} from 'vue'import {defineStore} from 'pinia'import {listUser} from "@/apis/user";import {cardActionReload, notyError} from "@/utils";import {useEventOptionsStore} from "@/stores/eventOptions";export const useUserOptionsStore = defineStore('userOptions', () => { const eventOptions = useEventOptionsStore(); const cardEvent = ref() const disabled = ref(false) const list = ref([]); const count = ref(0); const page_size_list = ref([5, 10, 20, 50, 100]) const total_page = computed(() => { if (count.value === 0 || DTO.value.page_size >= count.value) { return 1; } else { return (count.value % DTO.value.page_size === 0) ? (count.value / DTO.value.page_size) : Math.ceil(count.value / DTO.value.page_size); } }) const page_list = computed(() => { let arr = []; if (total_page.value <= 7) { for (let i = 0; i < (total_page.value - 1); i++) { arr.push(i + 2); } } else { if (DTO.value.page >= 5) { if (total_page.value - DTO.value.page < 2) { arr = [total_page.value - 4, total_page.value - 3, total_page.value - 2, total_page.value - 1, total_page.value]; } else { arr = [DTO.value.page - 2, DTO.value.page - 1, DTO.value.page, DTO.value.page + 1, DTO.value.page + 2]; } } else { arr = [2, 3, 4, 5, 6, 7]; } } return arr; }) const editPage = async (page) => { DTO.value.has_count = false; DTO.value.page = parseInt(page); await apiList(); } const editPageSize = async (page_size) => { if (page_size) { DTO.value.page_size = parseInt(page_size); } DTO.value.has_count = false; DTO.value.page = 1; await apiList(); } const DTO = ref({ user_id: '', page: 1, page_size: 20 }); const apiList = async () => { const reload = cardActionReload(cardEvent.value); reload.open(); const {code, msg, data} = await listUser(DTO.value); if (code === 0 && data) { list.value = data.list; count.value = data.count; } else { notyError(msg); } reload.close(); eventOptions.classContentInnerEvent?.scrollTo(0, 0); } return {cardEvent, disabled, list, count, page_size_list, total_page, page_list, editPage, editPageSize, DTO, apiList}})共有2个答案
百里成仁
很多函数都可以提取成单个JS文件哇，然后再在对应的 Store 文件里面 import 使用就可以了。
最后插一嘴，就是为啥要把分页请求之类的操作放到 Pinia 里面呢？
金正阳
要合并多个 Vue 3 Pinia store 文件，你可以考虑创建一个通用的 store 结构，并使用函数参数或高阶函数来定制每个 store 的特定部分。以下是一个简化的示例，展示如何做到这一点：
首先，创建一个通用的 store 工厂函数：
import { computed, ref } from 'vue';import { defineStore } from 'pinia';// 通用的 store 工厂函数export function createPaginatedStore(apiFunction, storeId, dtoDefaults) { return defineStore(storeId, () => { const cardEvent = ref(); const disabled = ref(false); const list = ref([]); const count = ref(0); const page_size_list = ref([5, 10, 20, 50, 100]); const DTO = ref(dtoDefaults); const total_page = computed(() => { if (count.value === 0 || DTO.value.page_size >= count.value) { return 1; } else { return Math.ceil(count.value / DTO.value.page_size); } }); const page_list = computed(() => { let arr = []; if (total_page.value <= 7) { for (let i = 0; i < (total_page.value - 1); i++) { arr.push(i + 2); } } else { if (DTO.value.page >= 5) { if (total_page.value - DTO.value.page < 2) { arr = [total_page.value - 4, total_page.value - 3, total_page.value - 2, total_page.value - 1, total_page.value]; } else { arr = [DTO.value.page - 2, DTO.value.page - 1, DTO.value.page, DTO.value.page + 1, DTO.value.page + 2]; } } else { arr = [2, 3, 4, 5, 6, 7]; } } return arr; }); const editPage = async (page) => { DTO.value.page = parseInt(page); await fetchData(); }; const editPageSize = async (page_size) => { if (page_size) { DTO.value.page_size = parseInt(page_size); } DTO.value.page = 1; await fetchData(); }; const fetchData = async () => { const reload = cardActionReload(cardEvent.value); reload.open(); try { const { code, msg, data } = await apiFunction(DTO.value); if (code === 0 && data) { list.value = data.list; count.value = data.count; } else { notyError(msg); } } finally { reload.close(); } }; // 初始化数据加载 fetchData(); return { cardEvent, disabled, list, count, page_size_list, total_page, page_list, editPage, editPageSize, DTO }; });}然后，你可以使用这个工厂函数来创建多个 store，每个 store 都有自己的 API 函数和 DTO 默认值：
// userOptions.jsimport { createPaginatedStore } from './paginatedStoreFactory';import { listRole } from "@/apis/role";import { cardActionReload, notyError } from "@/utils";import { useEventOptionsStore } from "@/stores/eventOptions";export const useRoleOptionsStore = createPaginatedStore( listRole, 'roleOptions', { role: '', page: 1, page_size: 20 });// userOptions.jsimport { createPaginatedStore } from './paginatedStoreFactory';import { listUser } from "@/apis/user";import { cardActionReload, notyError } from "@/utils";import { useEventOptionsStore } from "@/stores/eventOptions";
类似资料：
-
我目前正在用vscode和一系列扩展开发一些JS/ES项目。但遗憾的是，VSCode的智能感知功能并没有按预期工作。 请参阅repo https://github.com/svennergr/intelliSense-test作为我的项目的示例设置。我所说的确切要点是main.js中“组件”的intellisense或type声明。VSCode显示类型“component”与其他类型一样： 只有当
-
TestNG Runner类执行多个功能文件？ 我知道我们可以创建一个可以针对多个TestNG测试类的TestNG xml，但是我们可以创建一个可以针对多个Cucumber/ Junit特性文件的TestNG.xml吗？
-
本文向大家介绍Python将多个excel文件合并为一个文件，包括了Python将多个excel文件合并为一个文件的使用技巧和注意事项，需要的朋友参考一下 利用Python，将多个excel文件合并为一个文件 思路 利用python xlrd包读取excle文件，然后将文件内容存入一个列表中，再利用xlsxwriter将内容写入到一个新的excel文件中。 完整代码 源文件excel1: 源文件e
-
换言之，我试图找出Firestore在SQL中与此等效的是什么： 是的，我问的是如何一次更新多个文档，但与链接的问题不同，我特别问的是如何一次更新多个文档，而不将任何内容读入内存，因为当您只想在所有匹配条件的文档上设置一个标志时，不需要这样做。 这就是我期望的工作方式，集合参考没有方法。 Transactions and Batched Writes文档提到了事务和批处理写入。事务被淘汰是因为“一
-
如何使用Firebase云函数实现微服务架构？我们是否可以编写多个.js文件，而不是将所有函数都写入index.js中，这样就不必为了单个函数的变化而重新部署所有函数
-
版本申明 pragma solidity ^0.4.0； 说明： 1 版本要高于0.4才可以编译 2 号表示高于0.5的版本则不可编译，第三位的版本号但可以变，留出来用做bug可以修复（如0.4.1的编译器有bug，可在0.4.2修复，现有合约不用改代码）。 引用其它源文件 全局引入 * import “filename”; 自定义命名空间引入 * import * as symbolN