mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-10-28 21:40:50 +00:00
14 KiB
14 KiB
Vuex → Pinia Store 映射文档(v8.0.vue3)
全部 22 个 Vuex 模块(src/store/module/ 21 个 + src/pages/plugin/kefu/store.js)已转换为 Pinia setup store。
src/store/index.js 现仅导出挂载了 pinia-plugin-persistedstate 的 pinia 实例,不再 import 任何模块(避免循环依赖)。
通用机械替换规则(页面迁移速查)
| Vuex 写法 | Pinia 写法 |
|---|---|
this.$store.state.menus.childMenuList |
useMenusStore().childMenuList(组件内建议 storeToRefs(useMenusStore()) 解构) |
this.$store.commit('menus/getmenusNav', x) |
useMenusStore().getmenusNav(x) |
this.$store.dispatch('order/getOrderTabs', x) |
useOrderStore().getOrderTabs(x)(返回原 Promise) |
this.$store.getters['user/messageUnreadCount'] |
useUserStore().messageUnreadCount |
...mapMutations('media', ['setDevice']) |
const mediaStore = useMediaStore() 后直接 mediaStore.setDevice('Mobile') |
...mapState('themeConfig', [...]) |
storeToRefs(useThemeConfigStore()) |
非命名空间模块(user/app):commit('setUserId', x) / getters['errorCount'] |
useUserStore().setUserId(x) / useAppStore().errorCount(函数名不变,仅去掉根级调用形式) |
store 内互访:rootState.user |
useUserStore()(在函数/computed 内部按需调用) |
- store id 与原 Vuex 模块名完全一致(
'user'、'mobildConfig'(历史拼写,保持)…)。 - 持久化:原 vuex-persist 以单一 key
vuex持久化 16 个模块;现改用pinia-plugin-persistedstate,每个 store 独立 key(默认为 store id)、localStorage。旧vuex缓存不会迁移,首次访问需重新登录/初始化,属预期。 - 所有 mutation 转为普通函数、action 转为普通/异步函数,默认
this.$store.dispatch的返回值语义保持(原来返回 Promise 的仍返回 Promise)。 - 原
state.xxx = ...全部改为xxx.value = ...,函数内逻辑逐行保留。
重命名汇总(页面替换时必看)
| store | 原 mutation/getter 名 | 新函数名 | 原因 |
|---|---|---|---|
| menus | childMenuList |
setChildMenuList |
与 state 字段 childMenuList 同名冲突(layout 组件 6 处调用) |
| userInfo | userInfo |
setUserInfo |
与 state 字段同名冲突 |
| userInfo | uniqueAuth |
setUniqueAuth |
同名冲突 |
| userInfo | name |
setName |
同名冲突 |
| userInfo | avatar |
setAvatar |
同名冲突 |
| userInfo | access |
setAccess |
同名冲突 |
| userInfo | logo |
setLogo |
同名冲突 |
| userInfo | logoSmall |
setLogoSmall |
同名冲突 |
| userInfo | version |
setVersion |
同名冲突 |
| userInfo | newOrderAudioLink |
setNewOrderAudioLink |
同名冲突 |
| upgrade | getter toggleStatus |
(删除,直接用 store.toggleStatus) |
恒等 getter,与 state 字段同名冲突,值完全一致 |
其余全部 mutation/action/getter 名字保持不变。部分函数的形参名有调整(如 setAccess(val)、TOGGLE_STATUS(status)),仅因形参遮蔽同名 ref,调用方按位置传参不受影响。
行为差异备注(均为原有死代码/笔误的显式化)
- menu 模块
filterSider/filterHeader(computed):原引用rootState.user.info/rootState.admin.user.info(admin模块不存在,历史笔误,实际意图为 user 模块)。已统一改为useUserStore().info。注意 user store 本身没有info字段,这两个 getter 与原版一致属死代码(全库无引用),一旦被求值会抛 TypeError(与原 Vuex 行为相同)。 userInfo/getMenusNavListaction:原文件未 importmenusApi(且 commit 的getmenusNavmutation 在该模块不存在),全库无 dispatch 调用。现补上 import 使其可用,并移除指向不存在 mutation 的 commit。listenFullscreen/toggleFullscreen(userLevel、order、integralOrder):原内部commit('setFullscreen', x)指向的 mutation 从未存在(Vuex 下仅产生 unknown mutation 警告、实际 no-op),已移除该调用,screenfull 逻辑保留。- mobildConfig 模块级模板:模块顶部默认模板变量
bottomMenu改名defaultBottomMenu(避免与 state 字段bottomMenu遮蔽),store 对外 API 不变。 - app 模块:私有辅助函数
closePage从模块顶层移入 setup 内部(原本就不是 mutation/action,未导出)。 user/setAccess、user/setUserId等:user 模块原为非命名空间,页面里可能是commit('setAccess', x)(无前缀),替换为useUserStore().setAccess(x)。
各 Store 明细
1. useUserStore — src/store/module/user.js(id: user,persist: true;原模块非命名空间)
- state:
userName、userId、avatarImgPath、access、hasGetInfo、unreadCount、messageUnreadList、messageReadedList、messageTrashList、messageContentStore - getter→computed:
messageUnreadCount、messageReadedCount、messageTrashCount - 函数(原 mutation):
setAvatar、setUserId、setUserName、setAccess、setHasGetInfo、setMessageCount、setMessageUnreadList、setMessageReadedList、setMessageTrashList、updateMessageContentStore、moveMsg - 函数(原 action):
getUnreadMessageCount(空实现,原注释代码已丢弃)
2. useAppStore — src/store/module/app.js(id: app,persist: true;原模块非命名空间)
- state:
breadCrumbList、tagNavList、homeRoute、local、errorList、adminTitle、hasReadErrorPage - getter→computed:
errorCount - 函数(原 mutation):
setBreadCrumb、setAdminTitle、setHomeRoute、setTagNavList、closeTag、addTag、setLocal、addError、setHasReadErrorLoggerStatus、clearAll - 函数(原 action):
addErrorLog(内部rootState.user→useUserStore())
3. useMenusStore — src/store/module/menus.js(id: menus,persist: true)
- state:
menusName(初值仍从 localStoragemenuList读取)、openMenus、childMenuList、oneLvMenus、oneLvRoutes - 函数(原 mutation):
getmenusNav、setopenMenus、setOneLvMenus、setOneLvRoute、setChildMenuList(原名childMenuList) - 函数(原 action):
getMenusNavList
4. useMenuStore — src/store/module/menu.js(id: menu,persist: true)
- state:
header、oneMenuName、sider、headerName、activePath、openNames - getter→computed:
filterSider、filterHeader、currentHeader、hideSider(见行为差异备注 1) - 函数(原 mutation):
setSider、setOpenMenuName、setHeader、setHeaderName、setActivePath、setOpenNames
5. useUserInfoStore — src/store/module/userInfo.js(id: userInfo,persist: true)
- state:
userInfo、uniqueAuth、name、avatar、access、logo、logoSmall、version、newOrderAudioLink、pageName、uploadListDataswiperBg、uploadListDatamenus、uploadListDataactivity、uploadListDatarecommend、uploadListDataadsRecommend、txtListData - 函数(原 mutation,名字不变):
uploadListswiperBg、uploadListmenus、uploadListrecommend、uploadListactivity、uploadListadsRecommend、txtList、setPageName、userRealName、userRealHeadPic - 函数(原 mutation,已改名):
setUserInfo(原userInfo)、setUniqueAuth(原uniqueAuth)、setName(原name)、setAvatar(原avatar)、setAccess(原access)、setLogo(原logo)、setLogoSmall(原logoSmall)、setVersion(原version)、setNewOrderAudioLink(原newOrderAudioLink) - 函数(原 action):
getMenusNavList(死代码,见备注 2)
6. useUserInfosStore — src/store/module/userInfos.js(id: userInfos,无 persist)
- state:
userInfos - 函数(原 mutation):
getUserInfos - 函数(原 action):
setUserInfos
7. useUserLevelStore — src/store/module/userLevel.js(id: userLevel,persist: true)
- state:
taskId、levelId、categoryId - 函数(原 mutation):
getTaskId、getlevelId、getCategoryId - 函数(原 action):
listenFullscreen、toggleFullscreen(见备注 3)
8. useOrderStore — src/store/module/order.js(id: order,persist: true)
- state:
orderStatus、orderTime、orderNum、orderType、fieldKey、orderChartType、isDels、delIdList、iconsaaaa、orderPayType、real_name - 函数(原 mutation):
getOrderStatus、getOrderType、getOrderTime、getOrderNum、getfieldKey、setOrderKeyword、onChangeTabs、onChangeChart、getIsDel、getisDelIdListl、resetSearch - 函数(原 action):
getOrderTabs、listenFullscreen、toggleFullscreen
9. useMediaStore — src/store/module/media.js(id: media,persist: true)
- state:
isMobile、isTablet、isDesktop、isFullscreen - 函数(原 mutation):
setDevice(type)(type ∈ Mobile/Tablet/Desktop)
10. useGoodSelectStore — src/diy/store/legacy/goodSelect.js(id: goodSelect,无 persist)
- state:
periphery、activeName、defaultConfig、component(DIY 默认配置大对象,内容与原版逐字一致) - 函数(原 mutation):
setConfig、upDataGoodList、updataConfig
11. useMorenStore — src/diy/store/legacy/moren.js(id: moren,无 persist)
- state:
activeName、defaultConfig、component(内容与原版逐字一致) - 函数(原 mutation):
setConfig、upDataName、upDataGoodList、updataConfig
12. useShoppingStore — src/diy/store/legacy/shopping.js(id: shopping,无 persist)
- state:
activeName、defaultConfig、component(内容与原版逐字一致) - 函数(原 mutation):
setConfig、updataConfig
13. useFreshStore — src/diy/store/legacy/fresh.js(id: fresh,无 persist)
- state:
activeName、defaultConfig、component(内容与原版逐字一致) - 函数(原 mutation):
setConfig、updataConfig
14. useIntegralOrderStore — src/store/module/integralOrder.js(id: integralOrder,persist: true)
- state:
orderStatus、orderTime、orderNum、orderType、fieldKey、orderChartType、isDels、delIdList、iconsaaaa、orderPayType - 函数(原 mutation):
getOrderStatus、getOrderType、getOrderTime、getOrderNum、getfieldKey、onChangeTabs、onChangeChart、getIsDel、getisDelIdListl - 函数(原 action):
getOrderTabs(直接resolve(true))、listenFullscreen、toggleFullscreen
15. useMobildConfigStore — src/diy/store/mobildConfig.js(id: mobildConfig,persist: true)
- state:
configName、pageTitle、pageName、pageShow、pageColor、pagePic、pageColorPicker、pageTabVal、pagePicUrl、defaultArray、bottomMenu、pageFooter(默认值与原版逐字一致) - 函数(原 mutation,全部保名):
FOOTER、UPBOTTOMMENU、ADDARRAY、DELETEARRAY、ARRAYREAST、defaultArraySort、UPDATEARR、SETCONFIGNAME、SETEMPTY、UPTITLE、UPNAME、UPSHOW、UPCOLOR、UPPIC、UPPICKER、UPRADIO、UPPICURL、footUpdata、footStatus(空实现,原即空)、footType、footBottom、footPageUpdata、bottomMenuUpdata、RESET_BOTTOM_MENU、titleUpdata、nameUpdata、showUpdata、colorUpdata、picUpdata、pickerUpdata、radioUpdata、picurlUpdata - 函数(原 action):
getData(空实现) - 模块级默认模板变量改名
defaultBottomMenu(见备注 4)
16. useUpgradeStore — src/store/module/upgrade.js(id: upgrade,persist: true)
- state:
toggleStatus - 函数(原 mutation):
TOGGLE_STATUS - 原 getter
toggleStatus为恒等 getter,直接使用useUpgradeStore().toggleStatus
17. useLayoutStore — src/store/module/layout.js(id: layout,persist: true)
- state:
menuCollapse - 函数(原 mutation):
changeCol
18. useThemeConfigStore — src/store/module/themeConfig.js(id: themeConfig,persist: true)
- state:
themeConfig(默认值与原版逐字一致) - 函数(原 mutation):
getThemeConfig(data)(整体替换) - 函数(原 action):
setThemeConfig(data)
19. useRoutesListStore — src/store/module/routesList.js(id: routesList,persist: true)
- state:
routesList - 函数(原 mutation):
getRoutesList - 函数(原 action):
setRoutesList
20. useTagsViewRoutesStore — src/store/module/tagsViewRoutes.js(id: tagsViewRoutes,无 persist)
- state:
tagsViewRoutes - 函数(原 mutation):
getTagsViewRoutes - 函数(原 action):
setTagsViewRoutes
21. useKeepAliveNamesStore — src/store/module/keepAliveNames.js(id: keepAliveNames,persist: true)
- state:
keepAliveNames - 函数(原 mutation):
getCacheKeepAlive - 函数(原 action):
setCacheKeepAlive
22. useKefuStore — src/pages/plugin/kefu/store.js(id: kefu,persist: true)
- state:
kefuInfo - 函数(原 mutation):
setInfo - 函数(原 action):
logoutKefu({ confirm, vm }) - 原在
src/store/index.js注册,现独立导出useKefuStore,使用方直接import { useKefuStore } from '@/pages/plugin/kefu/store'
DIY 组件聚合器(require.context → import.meta.glob)
src/diy/components/legacy/diyComponents/index.js、src/diy/components/mobilePage/index.js、src/diy/components/mobileConfig/index.js、src/diy/components/mobileConfigRight/index.js 四个文件均已改为:
const modules = import.meta.glob('./*.vue', { eager: true });
const obj = {};
Object.keys(modules).forEach((key) => {
obj[key.replace(/(\.\/|\.vue)/g, '')] = modules[key].default;
});
export default obj;
键名规则与原 path.basename(key, '.vue') 完全一致:./c_is_show.vue → c_is_show。原四个文件均为非递归扫描(require.context('./', false, ...)),故 glob 用 ./*.vue(不含子目录),导出名/默认导出结构不变。