模块化开发中复用通用状态逻辑，核心是将加载状态、错误提示、分页参数等高频逻辑抽离为独立Vuex模块，通过命名空间隔离、工具函数封装和组合式API实现跨业务复用。
模块化开发中复用通用状态逻辑，核心在于把可复用的逻辑抽离成独立、高内聚、低耦合的 Vuex 模块，并通过命名空间隔离 + 工具函数封装 + 组合式复用方式实现跨业务场景调用。
提取通用逻辑为独立模块
比如“加载状态（loading）”“错误提示（errorMsg）”“分页参数（page、pageSize）”“列表数据缓存”等高频共性逻辑，不要写在业务模块里，而是单独建 common.js 或 shared.js 模块：
- 定义统一 state 结构：如
{ loading: false, errorMsg: '', pagination: { page: 1, pageSize: 10 } } - 提供标准 mutations：如
SET_LOADING、SET_ERROR_MSG、RESET_PAGINATION - 配套 actions 封装常用流程：如
withLoading（自动开启/关闭 loading 的异步包裹器）
启用命名空间并规范导入方式
每个模块必须开启 namespaced: true，避免 mutation/action 名称冲突。复用时通过模块路径引用，而不是全局注册：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在业务模块（如
user.js）中 import 共享模块：import { sharedModule } from '@/store/modules/shared' - 在
modules配置中组合：shared: sharedModule - 组件内调用时明确前缀：
this.$store.dispatch('shared/withLoading', asyncFn)
用辅助函数封装高频操作
避免每个组件都写重复的 commit/dispatch 调用，封装可复用的工具函数：
立即学习“前端免费学习笔记（深入）”；
- 创建
useSharedStore.js（Composition API 风格）：
export const useSharedStore = () => {<br> const store = useStore();<br> return {<br> setLoading: (val) => store.commit('shared/SET_LOADING', val),<br> resetPagination: () => store.dispatch('shared/RESET_PAGINATION')<br> }<br>}; - 组件中直接解构使用：
const { setLoading, resetPagination } = useSharedStore();
配合插件或 Composition API 增强复用性
对于 Vue 3 项目，推荐结合 defineStore（Pinia）或 Vuex 的 createNamespacedHelpers 提升复用体验：
- Vuex 3.x 可用：
import { createNamespacedHelpers } from 'vuex'; const { mapState, mapActions } = createNamespacedHelpers('shared'); - 更推荐迁移到 Pinia：每个 store 天然独立，
useSharedStore()可直接被任意组件 import 并调用，无需 namespaced 手动拼接字符串 - 若仍用 Vuex，建议将通用模块 export 为工厂函数，支持传参定制初始状态，提升灵活性
