vue3 新建文件store自动导入

  1. store下新增个index.js用来做自动导入(pinia使用可参考之前这篇文章
javascript 复制代码
//使用pinia来管理全局状态
import { createPinia } from 'pinia'
// 自动导入所有 store 文件
const modulesFiles = import.meta.glob('./modules/*.js', { eager: true })
const stores = {}

for (const path in modulesFiles) {
  const moduleName = path.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')
  stores[moduleName] = modulesFiles[path].default
}
// 安装所有 store
export const setupStore = (app) => {
  const pinia = createPinia()
  app.use(pinia)
  // 注册所有 store
  Object.keys(stores).forEach(key => {
    if (stores[key] && typeof stores[key] === 'function') {
      stores[key]()
    }
  })
  
  return pinia
}
// 导出所有 store
export default stores
  1. mian.js引入setupStore文件
javascript 复制代码
import { setupStore } from './store'
const app = createApp(App)
setupStore(app)
相关推荐
shawxlee17 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
用户0595401744618 小时前
把记忆存储的回归测试从手工换成 Playwright + GitHub Actions,线上缺陷降低 80%
前端·css
触底反弹18 小时前
🚀 从 DOM0 级到 React 合成事件:前端事件监听的 20 年演进史
前端·react.js·面试
kyriewen18 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
颜酱18 小时前
04 | 召回前置准备:搭好召回所需的四个数据库
前端·人工智能·后端
wdfk_prog18 小时前
嵌入式面试真题第 15 题:不可恢复异常后的通用崩溃快照、调用栈保存与离线分析架构
linux·开发语言·面试·架构
晴空了无痕18 小时前
从 Go 基础到 K8s:一条可落地的 Go 服务端成长路线
开发语言·后端·golang·kubernetes
神明不懂浪漫18 小时前
【第五章】Java中的继承与多态
java·开发语言
神州世通19 小时前
解密企业通信安全防线:Avaya Aura 三层安全架构深度解析
开发语言·php
郝亚军19 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js